Question

我想用jquery ui实现在标签之间移动元素。如果我想将drop元素放到另一个标签 - droppable block（.elements）不会捕获悬停事件（outline不想应用），但是drop可以正常工作。

$( "#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具有重置偏移的功能：

    $scope.$watch(function(){
       return $window.innerWidth;
    }, function(value) {
        if (value <= 641) {
            logger.info('!!!less than 641');
            vm.singleColumn = true;
        };
    });

工作示例是here

jQuery ui在选项卡之间删除（移动）元素

1 个答案: