jQuery UI仅在特殊区域中删除元素 [英] jQuery UI dropping elements only in special areas

问题描述

我遇到了jQuery UI的拖放问题。我动态创建新元素，这些元素放在屏幕上的四个区域之一。这些元素是可拖动的，我可以将它们放在屏幕上。但我希望这些元素只能放在三个区域之一上。

I have a problem with jQuery UI's drag and drop. I create dynamically new elements which are placed on the screen in one of four areas. These elements are draggable and I can place them all over the screen. But I want that these elements can only be dropped on one of the three areas.

我在这里创建了一个完整的例子： http://jsbin.com/enusu4/

I created a full working example here: http://jsbin.com/enusu4/

点击红色边框区域中的文字，创建一个新元素并将其放置在绿色区域 drop1 中。此元素现在只能放置到其中一个绿色区域（ drop1 ， drop2 或 drop3 ），其他地方。我怎么能这样做？

By clicking the text in the red bordered area, a new element is created and placed in the green area drop1. This element should now only be droppable to one of the green areas (drop1, drop2 or drop3), nowhere else. How can I do this?

最好的问候，蒂姆。

推荐答案

我已经回答了类似的问题这里，通过一些修改，它可以做你想要的：

Javascript：

I've answered a similar question here, with some modifications it could do what you want:
Javascript:

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items",
        // if you want to disable the dragging after drop un-comment this
/*
        drop: function(e, ui) {
            $(ui.draggable).draggable({"disabled":true});
        }
        */
    });
    $('#droppable2').droppable();
    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable({
            revert: "invalid",
            scope: "items"
        });
    });
});

HTML：

<div><button type="button">Add box</button></div>
<div id="droppable">Drop here</div>
<div id="droppable2">Out of scope!</div>
<div class="clear"></div>
<div id="cont">
    <div id="draggable" class="drag">Drag me</div>
    <div id="draggable2" class="drag">Drag me</div>
</div>

示例链接

编辑：
好​​的，这是一个更新：

Javascript：

Okay, here's an update:
Javascript:

$(function() {
    var dragOptions = {
        revert: "invalid",
        scope: "items",
        helper: "clone"
    }
    $('.drag').draggable(dragOptions);
    $('.droppable').droppable({
        scope: "items",
        drop: function(e, ui) {
            var $drop = $(this);
            $(ui.draggable).draggable({
                "disabled": true
            }).appendTo($drop);
        }

    });
    $('#droppable2').droppable();

    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable(dragOptions);
    });
});

HTML：

<div><button type="button">Add box</button></div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop1 droppable"></div>
</div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop2 droppable"></div>
</div>
<div style="float: left;"><h3>Out of scope!</h3>
    <div id="droppable2"></div>
</div>
<div class="clear"></div>
<div id="cont">
    <div class="drag">Drag me</div>
    <div class="drag">Drag me</div>
</div>

示例链接2

这篇关于jQuery UI仅在特殊区域中删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！