jQuery UI Sortable add class of dragged object to placeholder to determine size
You can't do it on the create event, that fires whenever you initialize the sortable. Instead you can set placeholder:'placeholder'
, and use the start
event to add an extra class to ui.placeholder
to make it the proper size:
itemList.sortable({
placeholder: 'placeholder',
start: function(event, ui) {
var plus;
if(ui.item.hasClass('single-single')) plus = 'single-single'; else
if(ui.item.hasClass('single-double')) plus = 'single-double'; else
if(ui.item.hasClass('single-triple')) plus = 'single-triple'; else
if(ui.item.hasClass('double-single')) plus = 'double-single'; else
if(ui.item.hasClass('double-double')) plus = 'double-double'; else
if(ui.item.hasClass('double-triple')) plus = 'double-triple'; else
plus = 'single-single';
ui.placeholder.addClass(plus);
}});
You might want to implement a more sophisticated class detection method, it's just a quick copy-paste so I could test it.
Here's the demo: http://jsfiddle.net/fTBbc/24/
Chris_O
I'm a WordPress Engineer for X-Team-wp (XWP). WordPress.org. github Twitter
Updated on June 29, 2022Comments
-
Chris_O almost 2 years
I'm using sortable to sort different width x height divs and masonry to clean up the empty spaces. How can I pass the class of the div being sorted to the placeholder so they are the same size?
The boxes have the classes single-single, double-single, etc... to determine the size.
Example: http://jsfiddle.net/c3mdigital/fTBbc/17/
The problem is the classes are not being passed. Sortable adds the class when it doesn't recognize the placeholder option but it sets visibility to hidden.
code:
//The extra ajax stuff is to save the sort order to WordPress menu order. $(document).ready(function() { $('#edit').click(function() { var itemList = $('.sortable'); itemList.sortable({ start: function(event, ui) { var plus = ui.item.hasClass('double-single') ? 'double-single' : 'single-single'; var placeholder = itemList.sortable("option", "placeholder", 'placeholder ' + plus ); }, update: function(event, ui) { $('#loading-animation').show(); // Show the animate loading gif while waiting opts = { url: MyAjax.ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php type: 'POST', async: true, cache: false, dataType: 'json', data: { action: 'item_sort', // Tell WordPress how to handle this ajax request order: itemList.sortable('toArray').toString() // Passes ID's of list items in 1,3,2 format }, success: function(response) { $('#loading-animation').hide(); // Hide the loading animation return; }, error: function(xhr, textStatus, e) { // This can be expanded to provide more information alert(e); // alert('There was an error saving the updates'); $('#loading-animation').hide(); // Hide the loading animation return; } }; $.ajax(opts); } }); }); $('.sortable').disableSelection(); }); $(function() { $('#sort').click(function() { $('#sortable1').masonry({ columnWidth: 325, itemSelector: '.ui-state-default' }); }); });