56

ドラッグ可能なクローンを作成してドロップ可能にドロップすると、再度ドラッグできなくなります。それ、どうやったら出来るの？.append次に、クローンをドロップ可能に追加する方法しかわかりません。ただし、ドロップ位置ではなく、既存の要素の後の左上隅にスナップします。

$(document).ready(function() {
    $("#container").droppable({
        drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
        }
    });
    $(".product").draggable({
        helper: 'clone'
    });
});
</script>

<div id="container">
</div>
<div id="products">
    <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
    <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
    <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>
4

4 に答える 4

52

それを行う1つの方法は次のとおりです。

$(document).ready(function() {
    $("#container").droppable({
        accept: '.product',
        drop: function(event, ui) {
            $(this).append($("ui.draggable").clone());
            $("#container .product").addClass("item");
            $(".item").removeClass("ui-draggable product");
            $(".item").draggable({
                containment: 'parent',
                grid: [150,150]
            });
        }
    });
    $(".product").draggable({
        helper: 'clone'
    });
});

しかし、それが素晴らしくきれいなコーディングかどうかはわかりません。

于 2009-05-15T10:48:07.960 に答える
26

Google経由でこの質問を見つけました。追加時に「ui.draggable」を「ui.helper」に変更するまで、位置がコンテナにスナップしないようにすることもできませんでした。

$(this).append($(ui.helper).clone());
于 2009-08-31T04:46:43.270 に答える
5

ドロップされたアイテムを再配置しようとしている人のために。こちらをご覧ください。

jqueryのドラッグアンドドロップとクローン。

私は実際に次のようなコードを使用する必要がありました

$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);

それをするために。

于 2010-03-02T02:33:48.467 に答える
0

これが私の解決策です。クローンをドラッグアンドドロップし、必要に応じて別のドラッグアンドドロップで置き換えることができます。また、ドロップされた div オブジェクトを返すコールバック関数パラメーターもあり、一度ドロップされた jquery で選択された div で何かを行うことができます。

refreshDragDrop = function(dragClassName,dropDivId, callback) {
  $( "." + dragClassName ).draggable({
    connectToSortable: "#" + dropDivId,
    helper: "clone",
    revert: "invalid"
  });
  $("#" + dropDivId).droppable({
    accept: '.' + dragClassName,
    drop: function (event, ui) {
      var $this = $(this),
        maxItemsCount = 1;
      if ($this.children('div').length == maxItemsCount ){
        //too many item,just replace
        $(this).html($(ui.draggable).clone());
        //ui.sender.draggable('cancel');
      } else {
        $(this).append($(ui.draggable).clone());
      }
      if (typeof callback == "function") callback($this.children('div'));
    }
  });
}
于 2016-01-28T22:35:13.647 に答える