javascript - 带有碰撞检测的 jQuery 拖动

Question

我有以下 HTML:

<div class="list" id="list">
    <div class="item" id="i1">Item 1</div>
    <div class="item" id="i2">Item 2</div>
    <div class="item" id="i3">Item 3</div>
</div>
<div class="timeline" id="timeline">
</div>

我希望使用 jQuery 能够做到的是:

1. 能够将 .item 从 #list 拖到 #timeline
2. .item 可以根据需要多次放入时间线，例如。时间线中可能有 4 个项目 #i1。
3. .item在时间轴中不能相互重叠
4. .item 可以放置在时间轴上的任何位置，只要它们不与时间轴上的任何其他项目重叠

所以我选择了 jQueryUI 的 Draggable 和 Droppable，也选择了 jQueryUI Draggable Collision Plugin .

这是我开始使用的 jQuery:

$('#list .item').draggable({
    helper: 'clone',
    revert: 'invalid',
    //the following are for the jquery-ui-dragggable-collision plugin
    obstacle: '#timeline .item',
    preventCollision: true
});
$('#timeline').droppable({
    accept: '.item'
});

我的问题是 jQueryUI Draggable Collision Plugin 仅在您拖动原始 Div 本身而不是拖动助手时才起作用。我需要 helper ，这样我才能实现#2(添加一个项目的多个副本)。但我需要像 Collision Plugin 这样的东西，这样我才能实现#3(项目不重叠)。

有人知道解决这个问题的方法吗？是否有另一个插件可以对可拖动对象的助手进行碰撞检测？是否有另一种方法可以尝试实现我想要实现的目标？

Answer 1

如果您更喜欢 jsfiddle 而不是按照您的建议使用 jQueryUI Draggable Collision Plugin，这里有一些可以玩的东西:Link to jsfiddle

该方法使用原始帮助程序以利用碰撞功能。克隆在开始事件函数中生成(如果拖动没有导致成功放置，则在停止事件中再次删除):

$(function(){
    var draggableSelector = ".list .item:not(.dropped)";
    var init = function() {  
        $(draggableSelector).each(function(i){
            $(this)
                .draggable({
                    //helper: 'clone',
                    revert: 'invalid',
                    start: function(event,ui) {
                        var $clone = ui.helper.clone();
                        $clone
                            .removeClass("ui-draggable ui-draggable-dragging")
                            .insertAfter(ui.helper)
                        ;
                        $(this).data("clone",$clone);
                    },
                    stop: function(event,ui) {
                        if( $(".ui-draggable-dragging.dropped").length == 0) {
                            $(this).data("clone").remove();
                        };
                    },
                    //the following are for the jquery-ui-draggable-collision plugin
                    refreshPositions: true,
                    obstacle: '.item.dropped',
                    preventCollision: true,
                })
                .css("left", ( ($(this).width() + 5) * i) + "px")
            ;
        });

        $('.timeline').droppable({
            accept: '.item'
            ,drop: function(event,ui) {
                ui.draggable
                    .addClass("dropped")
                ;
                setTimeout(reinit, 500);
            }
        });                
    };

    var reinit = function() {
        $(".list .item.ui-draggable").draggable("destroy");
        init();
    }

    init();
});

希望这会有用。