0

The fiddle explains almost everything: http://jsfiddle.net/1zqdsar6/3/

I have a sortable container of elements which can be dropped on list items. The list items are grouped into several different lists via tabs. The user should be able to drop an element on the desired list-item, by changing the tab (hovering over the tab while dragging an item) and dropping it on the desired list item.

I'm able to switch tabs during drag, however, the list items of the newly opened tab are not recognized as droppable by JQueryUI. Only the list items which were visible at the time the drag started are recognized as droppables. Is there a way to "refresh" droppable items during drag (e.g. when tab is switched)?

I noticed, that when you switch to a tab during drag and move the element to the very right, so that horizontal scroll bars appear, then the list items of the newly opened tab become droppable. This might be a hint to the possible solution.

Thanks for any help!

Edit: I know about refreshPositions: True, but this is super slow. A triggered refresh on tab change would be my prefered solution.

--- JS-Fiddle JS-code ---

$("#elemContainer").sortable();
$(".sidebar-list-item").droppable({
    accept: ".elem",
    hoverClass: "active",
    tolerance: "pointer",
    drop: function (event, ui) {
        ui.draggable.remove();
    },
});
$(".sidebar-tab").droppable({
    // make tabs droppable, to detect, when to switch to different list
    accept: ".elem",
    tolerance: "pointer",
    over: function (event, ui) {
        $(this).tab("show");
    }
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // tab was switched
    console.log($(e.target)); // activated tab
    e.relatedTarget // previous tab
})
Achim
  • 1
  • 1
  • Could [this](http://stackoverflow.com/questions/16033557/droppable-over-event-not-firing-on-different-tab) possibly be related? – OrionMelt Sep 29 '14 at 07:25
  • Related to what? @OrionMelt – Achim Sep 30 '14 at 15:49
  • Check out the link to another SO thread (it's on the word "this" in my previous comment, in case you missed it). They had a very similar problem with droppable events on a tabbed list. – OrionMelt Sep 30 '14 at 16:08

0 Answers0