Kiedy zrobię przeciągalny klon i upuszczę go do upuszczalnego, nie mogę go ponownie przeciągnąć

Kiedy zrobię przeciągalny klon i wrzucę go do upuszczalnego, nie mogę go ponownie przeciągnąć. Jak mam to zrobić? Po drugie, mogę tylko wymyślić, jak nam .append dodać klon do droppable. Ale potem przyciąga się do lewego górnego rogu po każdym istniejącym elemencie, a nie pozycji upuszczania.

$(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>
Author: bluish, 2009-05-15
Source

4 answers

Jednym ze sposobów jest: 

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

Ale nie jestem pewien, czy jest to Å‚adne i czyste kodowanie.

 51
Author: Cudos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-21 13:20:56

Znalazłem to pytanie przez Google. Nie mogłem też powstrzymać pozycji od przyciągania do kontenera, dopóki nie zmieniłem interfejsu użytkownika.przeciągalny interfejs użytkownika.helper " przy dodaniu: 

$(this).append($(ui.helper).clone());
 25
Author: Bob Nadler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-31 04:53:08

Dla osób próbujących zmienić pozycję upuszczonego przedmiotu. Spójrz tutaj.

Jquery drag /drop and clone .

Musiałem użyć kodu, który wygląda jak 

$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
Aby to zrobić.
 5
Author: rado,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:39

Oto moje rozwiązanie, pozwala na przeciąganie i upuszczanie klonu, a następnie zastępowanie go po razie innym przeciąganiem i upuszczaniem. Posiada również parametr funkcji zwrotnej, który przekazuje z powrotem upuszczony obiekt div, dzięki czemu można zrobić coś z jQuery wybranym div po upuszczeniu.

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'));
    }
  });
}
 0
Author: Damon Hogan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-28 22:35:13