jQuery拖动与碰撞检测 [英] jQuery Dragging With Collision Detection

问题描述

我有以下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，我想做的是:

What I want to be able to do, with jQuery, is:

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

1. Be able to drag .items from the #list into the #timeline
2. .items can be dropped into the timeline as many times as required, eg. there could be 4 of item #i1 in the timeline.
3. .items in the timeline must not overlap each other
4. .items can be positioned at any place along the timeline so long as they do not overlap any other items on the timeline

因此，我选择了jQueryUI的Draggable和Droppable，也选择了 jQueryUI Draggable Collision插件.

So Ive gone for jQueryUI's Draggable and Droppable, and also gone for the jQueryUI Draggable Collision Plugin.

这是我开始使用的jQuery:

Here is the jQuery I have started with:

$('#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插件仅在您拖动原始Div本身而不拖动助手时才起作用.我需要帮助者才能达到#2(添加一项的多个副本).但是我需要类似Collision Plugin的工具，这样我才能实现#3(项目不重叠).

My problem is that the jQueryUI Draggable Collision Plugin only works when you are dragging the original Div itself, and not dragging a helper. I need helpers so that I can achieve #2 (adding multiple copies of one item). But I need something like the Collision Plugin so I can achieve #3 (items not overlapping).

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

Does anybody know of a solution to this problem? Is there another plugin that does collision detection on the helper of a draggable object? Is there another approach I can try to get what I want to achieve?

推荐答案

如果您更喜欢jsfiddle，而不是按照建议的那样使用jQueryUI Draggable Collision插件，则可以使用以下方法:

If you prefer a jsfiddle to that uses the jQueryUI Draggable Collision Plugin as you suggested, here is something to play around with: Link to jsfiddle

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

The approach uses the original helper in order to make use of collision functionality. The clone is generated in the start event function (and removed again in the stop event in case the dragging did not result in a successful drop):

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

希望这会很有用.

这篇关于jQuery拖动与碰撞检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！