0

I want to realize moving elements between tabs using jquery ui. If I want drop element to another tab - droppable block (.elements) doesn't catch hover event (outline doesn't want to apply), but dropping works correctly.

$( "#tabs" ).tabs();
$('.elements').children().draggable({
    appendTo: 'body',
    opacity: 0.9,
    helper: "clone",
    zIndex: 1000,
    cursorAt: { left: 50, top: 20 },
});

// drop into needle element
$('.elements').droppable({
    accept: '.element',
    tolerance: 'pointer',
    activeClass: "can-drop",
    hoverClass: "drop-here",
    drop: function( event, ui ) {
        alert('Drop');
    }
});

// drop
$('.ui-tabs-nav').children().droppable({
    accept: '.element',
    tolerance: 'pointer',
    over: function( event, ui ) {        
       $("#tabs").tabs("option", "active", 1);
    }
})

You can see my example on jsfiddle.

Can someone help me? How can I fix it?

Thanks!

Adam Huffman
  • 1,031
  • 14
  • 21
Andrii
  • 1
  • 1
  • I guess you need something like **[this question here](http://stackoverflow.com/questions/19637425/struggling-with-jquery-ui-sortable-and-tabs-would-like-to-move-items-around-tab)** and **[this demo here](http://jsfiddle.net/zeTP8/)** – Guruprasad J Rao Jun 04 '15 at 13:12
  • No, I don`t need drop element into tab button. I need switch tab when cursor is over tab button and drop into new tab content (there can be two or more droppable areas). – Andrii Jun 09 '15 at 06:39
  • I have already found answer for my question: draggable has function to reset offsets: `$.ui.ddmanager.prepareOffsets(ui.draggable.draggable('instance'));` Work example is [here](http://jsfiddle.net/mcAndry/h7raxjyu/4/) – Andrii Jun 09 '15 at 06:43

1 Answers1

0

I have already found answer for my question: draggable has function to reset offsets:

$.ui.ddmanager.prepareOffsets(ui.draggable.draggable('instance'));

Worked example is here

Andrii
  • 1
  • 1