javascript - jQuery UI dropping elements only in special areas - Stack Overflow

admin管理员组

文章数量:1421196

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.

I created a full working example here: /

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?

Best Regards, Tim.

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.

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

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?

Best Regards, Tim.

• javascript
• jquery
• jquery-ui

Share Improve this question Follow asked Jan 1, 2011 at 17:42 TimTim 13.3k3636 gold badges111111 silver badges159159 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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-ment 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>

Example Link

EDIT: 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>

Example Link 2

$("#dropable").droppable({
   hoverClass: "ui-state-hover",
   drop: function (event, ui) {
       if ( $('.ui-state-hover').size() > 0){return false;}
       //TODO
   }
}

本文标签： javascriptjQuery UI dropping elements only in special areasStack Overflow