Когда я делаю перетаскиваемый клон и бросаю его в droppable, я не могу перетащить его снова

Question

Когда я делаю перетаскиваемый клон и бросаю его в droppable, я не могу перетащить его снова

когда я делаю перетаскиваемый клон и бросаю его в droppable, я не могу перетащить его снова. Как мне это сделать? Во-вторых, я могу только выяснить, как нам .append чтобы добавить клон в droppable. Но затем он привязывается к верхнему левому углу после любого существующего элемента, а не к позиции падения.

$(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>

479 4

jQuery jquery-ui-droppable clone

4 ответов:

Comments

Ничего не найдено.

Cudos · Accepted Answer · 2016-09-21 16:20:56

один из способов сделать это:

$(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'
    });
});

но я не уверен, что это хорошее и чистое кодирование.

Bob Nadler · Accepted Answer · 2009-08-31 07:53:08

Я нашел этот вопрос через Google. Я также не мог удерживать позиции от привязки к контейнеру, пока не изменил пользовательский интерфейс.перетаскивать " на " пользовательский интерфейс.помощник при добавлении:
$(this).append($(ui.helper).clone());

rado · Accepted Answer · 2017-05-23 15:10:39

для тех, кто пытается переместить за товар. Взгляните сюда.

jQuery перетаскивание и клонирование.

Я на самом деле должен был использовать код, который выглядит как
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
сделать это.

Damon Hogan · Accepted Answer · 2016-01-29 00:35:13

вот мое решение, оно позволяет перетаскивать клон, а затем заменять его по мере необходимости другим перетаскиванием. Он также имеет параметр функции обратного вызова, который передает назад отброшенный объект div, чтобы вы могли что-то сделать с выбранным div jquery после отбрасывания.
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'));
    }
  });
}