Taxe Rules : Modification du javascript Drag & Drop pour ordonner les éléments.

This commit is contained in:
macuser
2013-09-27 01:38:26 +02:00
parent be4c6380e7
commit 6840ad362e

View File

@@ -57,7 +57,7 @@
</p>
</div> -->
<div class="panel panel-default place">
<div id="panel" class="panel panel-default place">
<div class="panel-heading">
<h3 class="panel-title">Create a tax rule</h3>
</div>
@@ -84,7 +84,7 @@
</div>
<div class="col-md-6">
<div class="panel panel-default take">
<div id="panel-list" class="panel panel-default take">
<div class="panel-heading">
<h3 class="panel-title">List of taxes</h3>
</div>
@@ -124,18 +124,22 @@
{/javascripts}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
{literal}
<script>
<!--
$(function() {
// Création du tableau des règles de taxe
// Cache jQuery Objects
var $group = $('#panel');
var $list = $('#panel-list');
// Build array of taxes rules
$('#apply-taxes-rules').click(function(){
var taxesRules = [],
index;
$('.place .panel-body .drop-group').each(function(i){
$('.drop-group',$group).each(function(i){
var $this = $(this);
index = i;
taxesRules[index] = [];
@@ -143,86 +147,126 @@
taxesRules[index][j] = [];
taxesRules[index][j] = $(this).text();
});
});
});
});
$('.place .panel-body').sortable({
axis: "y",
revert: true,
containment: "parent",
items : "> div"
});
$(".draggable").draggable({
cursor: "move",
revert: true,
containment: "document",
// Make the list of taxes draggable
$('.draggable', $list).draggable({
cursor: 'move',
helper: 'clone',
//containment: "document",
opacity: 0.5,
start: function(event, ui){
// Initilisation du droppable pour nouveaux groupes
initDrop();
},
stop: function(event, ui) {
var $zone = $('.panel-body').find('.droppable');
var zoneLength = $zone.length;
if(zoneLength > 1){
$zone.each(function(){
var $this = $(this);
var draggableLength = $('.draggable', $this).length;
// Si une zone est vide on la supprime
if(draggableLength == 0){
$this.slideUp(function(){
$this.remove();
});
}
});
}
}
revert: "invalid", // when not dropped, the item will revert back to its initial position
zIndex: 10
});
// Initialisation du droppable
initDrop();
// Fonction droppable
function initDrop() {
$(".droppable").droppable({
hoverClass: "over",
// Droppable Options
var droppableOptions = {
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
hoverClass: 'over',
drop: function( event, ui ) {
var $this = $(this),
$elem = ui.draggable.detach();
var $current_group = $(this),
$tax = ui.draggable;
// On ajout au groupe existant
if($this.hasClass('add-to-group')){
$this.find('.drop-message').after($elem);
// Move taxes
$tax.fadeOut(function() {
$(this).remove();
$tax.appendTo( $current_group ).fadeIn();
});
}
// On crée un nouveau groupe
else if($this.hasClass('create-group')){
var $dropZone = $this.prev('.panel-body').find('.drop-group:last-child').clone();
$dropZone.find('.draggable').remove();
};
var $panelBody = $this.prev('.panel-body');
$panelBody.append($dropZone);
// let the drop-group be droppable & sortable, accepting the tax items
$('.add-to-group', $group)
.sortable({ // Sort
//axis: 'y',
cursor: 'crosshair',
items: "div",
revert: true,
}).droppable(droppableOptions);
var $newZone = $panelBody.find('.drop-group:last-child');
$newZone.find('.drop-message').after($elem);
}
// On supprime d'un groupe
else if($this.hasClass('remove-from-group')){
var $panelBody = $this.prev('.panel-body');
$panelBody.append($elem);
// Allow the user to create a new drop-group
$('.create-group', $group)
.droppable({
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
hoverClass: 'over',
drop: function( event, ui ) {
var $tax = ui.draggable;
var $create_group;
// Check if we have already an empty group
var $empty_group = $group.find('.drop-group:not(:has(> .draggable))');
if($empty_group.size() > 0){ // if yes (Use the first empty group)
$create_group = $empty_group.filter(':first');
// Move taxes
$tax.fadeOut(function() {
$(this).remove();
$tax.appendTo( $create_group ).show();
$group.find('.panel-body').append($create_group);
});
}else{ //if no (Create a new group)
$create_group = $group.find('.drop-group:last-child').clone();
// Remove taxes
$create_group.find('.draggable').remove();
// Make the new group droppable
$create_group
.sortable({ // Sort
//axis: 'y',
cursor: 'crosshair',
items: "div",
revert: true,
})
.droppable(droppableOptions);
// Move taxes
$tax.fadeOut(function() {
$(this).remove();
$tax.appendTo( $create_group ).show();
$group.find('.panel-body').append($create_group);
});
}
}
});
}
// let the gallery be droppable as well, accepting items from the trash
$('.remove-from-group', $list)
.droppable({
accept: "#panel .draggable",
hoverClass: 'over',
drop: function( event, ui ) {
var $tax = ui.draggable.clone(); ui.draggable.remove();
// Move taxes
$tax.fadeOut(function() {
//$(this).remove();
$tax.removeClass('ui-sortable-helper').addClass('ui-draggable').removeAttr('style').draggable({
cursor: 'move',
helper: 'clone',
//containment: "document",
opacity: 0.5,
revert: "invalid", // when not dropped, the item will revert back to its initial position
zIndex: 10
}).prependTo( $list.find('.panel-body') ).fadeIn();
// Check if we have an empty group
var $zone = $('.add-to-group', $group);
var $empty_zone = $zone.filter(':not(:has(> .draggable))');
if($zone.size() > $empty_zone.size()){ // Remove empty group only if we have more than 1 group
$empty_zone.slideUp(function(){ $(this).remove(); });
}
});
}
});
});
// -->
</script>
{/literal}
{/block}