jQuery ui 在选项卡之间放置（移动）元素

Question

我想用jqueryui实现标签页之间的元素移动。如果我想将元素拖放到另一个选项卡 - 可拖放块 (.elements) 不会捕获悬停事件（大纲不想应用），但拖放工作正常。

$( "#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);
    }
})

可以看到my example on jsfiddle.

有人可以帮助我吗？我该如何解决？

谢谢！

Answer 1

我已经找到问题的答案：draggable 具有重置偏移量的功能：

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

有效的例子是here

jQuery ui 在选项卡之间放置（移动）元素

jQuery ui drop (move) elements between tabs

jquery

tabs

jquery-ui

droppable

draggable