0

ここにサンプルコード：http：//jsfiddle.net/pDuxe/

2つの要素からなるdroppableスペースがあります。draggable私には2つの問題があります：

  1. そのdroppable領域にすでにdraggableアイテムが含まれている場合、次に2番目のアイテムを上にドロップしようとすると、そのアイテムをrefused元の位置に戻す必要があります。

  2. revert: 'invalid'コードは問題なく使用できますが、draggableアイテムをdroppableエリアに配置してから元に戻したい場合droppableは、元の位置ではなく、エリア内の元の場所に戻り続けます。

では、これら2つの状況をどのように達成するのでしょうか。

4

1 に答える 1

4

あなたができることは、あなたがdiv作成した でドラッグ可能なものをラップすることですdroppable:

<div id="originalposition">
    <div id="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <div id="draggable2" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
</div>

次に、次のようなことができます。

$(function() {
    $("#draggable").draggable({ revert: 'invalid' });
    $("#draggable2").draggable({ revert: 'invalid' });
    $("#originalposition").droppable({
        drop: function(event,ui) {
                 $("#droppable").removeClass("ui-state-highlight").addClass("ui-widget-header").html("<p>Drop here</p>"); 
              }
    });
    $("#droppable").droppable({
        drop: function(event, ui) {
                 $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
              },
        accept: function(dropElem) {
                //dropElem was the dropped element, return true or false to accept/refuse it
                return (!$(this).hasClass("ui-state-highlight") && $(dropElem).hasClass("ui-widget-content"));
                }
    });
});​

ここでフィドル。

于 2012-12-06T20:16:48.820 に答える