Taxe Rules : Modification du javascript Drag & Drop pour ordonner les éléments.
This commit is contained in:
macuser
@@ -57,7 +57,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="panel panel-default place">
|
<div id="panel" class="panel panel-default place">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title">Create a tax rule</h3>
|
<h3 class="panel-title">Create a tax rule</h3>
|
||||||
</div>
|
</div>
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
|
|
||||||
<div class="panel panel-default take">
|
<div id="panel-list" class="panel panel-default take">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title">List of taxes</h3>
|
<h3 class="panel-title">List of taxes</h3>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,18 +124,22 @@
|
|||||||
{/javascripts}
|
{/javascripts}
|
||||||
|
|
||||||
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||||
|
{literal}
|
||||||
<script>
|
<script>
|
||||||
|
<!--
|
||||||
$(function() {
|
$(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(){
|
$('#apply-taxes-rules').click(function(){
|
||||||
var taxesRules = [],
|
var taxesRules = [],
|
||||||
index;
|
index;
|
||||||
|
|
||||||
$('.place .panel-body .drop-group').each(function(i){
|
$('.drop-group',$group).each(function(i){
|
||||||
|
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
|
||||||
index = i;
|
index = i;
|
||||||
taxesRules[index] = [];
|
taxesRules[index] = [];
|
||||||
|
|
||||||
@@ -143,86 +147,126 @@
|
|||||||
taxesRules[index][j] = [];
|
taxesRules[index][j] = [];
|
||||||
taxesRules[index][j] = $(this).text();
|
taxesRules[index][j] = $(this).text();
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.place .panel-body').sortable({
|
// Make the list of taxes draggable
|
||||||
axis: "y",
|
$('.draggable', $list).draggable({
|
||||||
revert: true,
|
cursor: 'move',
|
||||||
containment: "parent",
|
helper: 'clone',
|
||||||
items : "> div"
|
//containment: "document",
|
||||||
});
|
|
||||||
|
|
||||||
$(".draggable").draggable({
|
|
||||||
cursor: "move",
|
|
||||||
revert: true,
|
|
||||||
containment: "document",
|
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
start: function(event, ui){
|
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||||
// Initilisation du droppable pour nouveaux groupes
|
zIndex: 10
|
||||||
initDrop();
|
});
|
||||||
},
|
|
||||||
stop: function(event, ui) {
|
|
||||||
|
|
||||||
var $zone = $('.panel-body').find('.droppable');
|
// Droppable Options
|
||||||
var zoneLength = $zone.length;
|
var droppableOptions = {
|
||||||
|
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
|
||||||
|
hoverClass: 'over',
|
||||||
|
drop: function( event, ui ) {
|
||||||
|
var $current_group = $(this),
|
||||||
|
$tax = ui.draggable;
|
||||||
|
|
||||||
if(zoneLength > 1){
|
// Move taxes
|
||||||
$zone.each(function(){
|
$tax.fadeOut(function() {
|
||||||
var $this = $(this);
|
$(this).remove();
|
||||||
var draggableLength = $('.draggable', $this).length;
|
$tax.appendTo( $current_group ).fadeIn();
|
||||||
|
|
||||||
// Si une zone est vide on la supprime
|
});
|
||||||
if(draggableLength == 0){
|
}
|
||||||
$this.slideUp(function(){
|
};
|
||||||
$this.remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
|
||||||
|
// 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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialisation du droppable
|
|
||||||
initDrop();
|
|
||||||
|
|
||||||
// Fonction droppable
|
// let the gallery be droppable as well, accepting items from the trash
|
||||||
function initDrop() {
|
$('.remove-from-group', $list)
|
||||||
$(".droppable").droppable({
|
.droppable({
|
||||||
hoverClass: "over",
|
accept: "#panel .draggable",
|
||||||
drop: function( event, ui ) {
|
hoverClass: 'over',
|
||||||
var $this = $(this),
|
drop: function( event, ui ) {
|
||||||
$elem = ui.draggable.detach();
|
var $tax = ui.draggable.clone(); ui.draggable.remove();
|
||||||
|
|
||||||
// On ajout au groupe existant
|
// Move taxes
|
||||||
if($this.hasClass('add-to-group')){
|
$tax.fadeOut(function() {
|
||||||
$this.find('.drop-message').after($elem);
|
//$(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(); });
|
||||||
}
|
}
|
||||||
// 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);
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
// -->
|
||||||
</script>
|
</script>
|
||||||
|
{/literal}
|
||||||
|
|
||||||
{/block}
|
{/block}
|
||||||
Reference in New Issue
Block a user