I ended up fixing this issue by extending the built in sortable functionality to create a fixedSortable that detects and selectively ignores hovering over lists when there’s a overlay in place. For my purposes, I just hard coded the rules, since that suited my needs/time constraints, but you should be able to make it completely … Read more
AFAIK, if iframes come from different domains, this is not doable in a “common” way (unless you control both iframes), browser security measures prevent it, otherwise you could wrap a banking website and steal passwords, for example, when you log in. Some info on workarounds: http://softwareas.com/cross-domain-communication-with-iframes If you control both iframes: Drag & Drop between … Read more
You need to use cancel. See working example here. Js: $(function() { $(‘.sortable’).sortable(); $(‘.sortable’).disableSelection(); $(‘.sortable’).sortable({ cancel: ‘.note’ }); }); As @Zephyr points out, this let’s you re-arrange the position by dragging the siblings, if you want to avoid that, use owise1 approach: $(‘.sortable’).sortable({ items : ‘:not(.note)’ });
demo: http://so.lucafilosofi.com/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/ SOLUTION: $(function() { $(‘ul#sortable’).sortable({ start: function(event, ui) { var start_pos = ui.item.index(); ui.item.data(‘start_pos’, start_pos); }, update: function(event, ui) { var start_pos = ui.item.data(‘start_pos’); var end_pos = ui.item.index(); alert(start_pos + ‘ – ‘ + end_pos); } }); }); NOTE: Updated to make use of jQuery data() method under advice of Alconja
I suggest jQuery UI Touch Punch. I’ve tested it on iOS 5 and Android 2.3 and it works great on both.
UPDATED: 26/08/2016 to use the latest jquery and jquery ui version plus bootstrap to style it. demo: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/ $(function() { $(‘#sortable’).sortable({ start: function(event, ui) { var start_pos = ui.item.index(); ui.item.data(‘start_pos’, start_pos); }, change: function(event, ui) { var start_pos = ui.item.data(‘start_pos’); var index = ui.placeholder.index(); if (start_pos < index) { $(‘#sortable li:nth-child(‘ + index + ‘)’).addClass(‘highlights’); … Read more
$(“#sortable1”).sortable({ connectWith: “.connectedSortable”, forcePlaceholderSize: false, helper: function (e, li) { copyHelper = li.clone().insertAfter(li); return li.clone(); }, stop: function () { copyHelper && copyHelper.remove(); } }); $(“.connectedSortable”).sortable({ receive: function (e, ui) { copyHelper = null; } });
One way is to create a custom helper with the selected items, hide the items while dragging and manually append the selected items upon receive. Here’s my attempt: css .selected { background:red !important; } .hidden { display:none; } script: $(‘.droptrue’).on(‘click’, ‘li’, function () { $(this).toggleClass(‘selected’); }); $(“ul.droptrue”).sortable({ connectWith: ‘ul.droptrue’, opacity: 0.6, revert: true, helper: function … Read more
Here’s a hopefully bug-free version, updating as you drag. It’s generating the current desired positions of the items when sorting starts, which means you should be able to change the classes whenever you need, refresh the widget’s list items and you’re good to go. It also uses the sortable’s built-in items property to prevent dragging … Read more
I found the answer here. I modified it slightly to clone the row, instead of adding widths to the original: helper: function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { // Set helper cell sizes to match the original sizes $(this).width($originals.eq(index).width()); }); return $helper; },