jquery - ejemplos - Cuando hago un clon que se puede arrastrar y lo suelto en un droppable no puedo arrastrarlo de nuevo

resizable jquery

Question

Cuando hago un clon que se puede arrastrar y lo suelto en un droppable, no puedo arrastrarlo de nuevo. ¿Cómo puedo hacer eso? En segundo lugar, solo puedo descubrir cómo .append para agregar el clon al dropable. Pero luego se ajusta a la esquina superior izquierda después de cualquier elemento existente y no a la posición de caída.

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

Answer 1

Aquí está mi solución, permite arrastrar y soltar un clon, y luego reemplazarlo luego según sea necesario con otro arrastrar y soltar. También tiene un parámetro de función de devolución de llamada que devuelve el objeto div descartado para que pueda hacer algo con el div jquery seleccionado una vez descartado.

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

Answer 2

He encontrado esta pregunta a través de Google. Tampoco pude evitar que las posiciones se ajustaran al contenedor, hasta que cambié ''ui.draggable'' a ''ui.helper'' cuando anexé:

$(this).append($(ui.helper).clone());

Answer 3

Para aquellos que intentan reposicionar el objeto abandonado. Echa un vistazo aquí.

JQuery arrastrar / soltar y clonar .

En realidad tuve que usar el código que parece

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

para hacerlo.

Answer 4

Una forma de hacerlo es:

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

Pero no estoy seguro de si es una codificación agradable y limpia.