0

コンテナが別のコンテナに重なるように、2 つのコンテナを配置しました。しかし、コンテナにアイテムをドロップすると、ドロップされたアイテムは両方のコンテナに入ります。どうすればそれを制限できますか?

   //JS Code: 
   $("div.draggable").draggable({
      helper: "clone",
      cursor: "move",
      containment: 'body'
    });


    $("div.droppable").droppable({
      addClasses: false,
      drop: function (event, ui) {
        var $draggable = $(ui.draggable),
            $droppable = $(this);

        $droppable.html($draggable.clone());
      }
    });

デモ: http://jsfiddle.net/HL8VR/

4

1 に答える 1

0

@Nalに感謝しますが、何もうまくいきません。このハックを作成しました。

アイテムがドロップされると、要素にいくつかのデータを保存します。残念ながら、データは分離できなかった両方の Droppables に保存されています。

$("div.droppable").droppable({
  addClasses: false,
  drop: function (event, ui) {
    var $draggable = $(ui.draggable),
        $droppable = $(this);

    $droppable.data({'drop': true, 'draggable': $draggable});
  }
});

しかし、アイテムがドロップされると、ホバリングしているドロップ可能オブジェクトを特定できました。

$('div.droppable').hover(function() {
    if ($(this).data('drop') === true) {
        $(this).html($($(this).data('draggable')).clone());

        // Clears the data from both droppables to avoid duplicating the item in them
        $('div.droppable').data({'drop': false, 'draggable': false});
    }        
});

デモ: http://jsfiddle.net/codef0rmer/AVQVs/

于 2012-09-22T08:27:51.057 に答える