TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refonte du code javascript pour mieux gérer le drag and drop, maintenant il faudrait ajouter un peu de css.

Browse Source
This commit is contained in:
touffies
2013-09-27 17:23:08 +02:00
parent bce83ea5c0
commit cbf0d19dcd
1 changed files with 48 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
templates/admin/default/tax-rule-edit.html
View File

@@ -150,121 +150,81 @@
}); });
}); });
// Make the list of taxes draggable // Default options for draggable
$('.draggable', $list).draggable({ var dragOptions = {
cursor: 'move', cursor: 'move',
helper: 'clone',
containment: "document", containment: "document",
opacity: 0.5, opacity: 0.5,
revert: "invalid", // when not dropped, the item will revert back to its initial position revert: "invalid", // when not dropped, the item will revert back to its initial position
zIndex: 10 zIndex: 10
}); };
// Droppable Options // Default options for sortabble
var droppableOptions = { var sortOptions = {
accept: "#panel-list .draggable", // Controls which draggable elements are accepted cursor: 'crosshair',
hoverClass: 'over', items: 'div',
drop: function( event, ui ) { update: function( event, ui ){
var $current_group = $(this), // Check if we have an empty group
$tax = ui.draggable; var $zone = $('.add-to-group', $group);
if($zone.size() > 1 && $(this).find('> div').size() == 0){ // Remove empty group only if we have more than 1 group
// Move taxes $(this).slideUp(function(){ $(this).remove(); });
$tax.fadeOut(function() { }
$(this).remove();
$tax.appendTo( $current_group ).fadeIn();
});
} }
}; };
// let the drop-group be droppable & sortable, accepting the tax items // Default options for droppable
$('.add-to-group', $group) var dropOptions = {
.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 accept: "#panel-list .draggable", // Controls which draggable elements are accepted
hoverClass: 'over', hoverClass: "over",
drop: function( event, ui ) { drop: function( event, ui ) {
var $tax = ui.draggable; var $drop = $(this);
var $create_group;
// Check if we have already an empty group if($(this).hasClass('create-group')){
var $empty_group = $group.find('.drop-group:not(:has(> .draggable))'); // Check if we have already an empty group
if($empty_group.size() > 0){ // if yes (Use the first empty group) var $empty_group = $group.find('.drop-group:not(:has(> div))');
$create_group = $empty_group.filter(':first'); if($empty_group.size() > 0){ // if yes (Use the first empty group)
$drop = $empty_group.filter(':first');
}else{ //if no (Create a new group)
$drop = $group.find('.drop-group:last-child').clone().appendTo($group.find('.panel-body'));
// Move taxes // Remove taxes
$tax.fadeOut(function() { $drop.find('> div').remove();
$(this).remove();
$tax.appendTo( $create_group ).show();
$group.find('.panel-body').append($create_group);
});
}else{ //if no (Create a new group) // Make the new group droppable
$create_group = $group.find('.drop-group:last-child').clone(); $drop
.droppable(dropOptions)
// Remove taxes .sortable(sortOptions);
$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);
});
} }
$("<div></div>").addClass('drag').text( ui.draggable.text() ).appendTo( $drop );
ui.draggable.remove();
} }
}); };
// let the gallery be droppable as well, accepting items from the trash // Make the list of taxes draggable
$('.draggable', $list).draggable(dragOptions);
// let the drop-group be droppable & sortable, accepting the tax items
$('.droppable', $group)
.droppable(dropOptions)
.sortable(sortOptions);
// let the gallery be droppable as well, accepting items from the trash
$('.remove-from-group', $list) $('.remove-from-group', $list)
.droppable({ .droppable({
accept: "#panel .draggable", accept: "#panel .drag",
hoverClass: 'over', hoverClass: 'over',
drop: function( event, ui ) { drop: function( event, ui ) {
var $tax = ui.draggable.clone(); ui.draggable.remove();
// Move taxes $("<div></div>").addClass('draggable').text( ui.draggable.text() ).draggable(dragOptions).appendTo( $list.find('.panel-body') );
$tax.fadeOut(function() { ui.draggable.remove();
//$(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> </script>
{/literal} {/literal}