Cuando hago una draggable clon y colóquelo en un drop no puedo arrastrar de nuevo. ¿Cómo puedo hacer eso? En segundo lugar, sólo puedo averiguar cómo nos .append para agregar el clon a la lanzables. Pero luego de que se ajusta a la esquina superior izquierda después de cualquier elemento existente y no la caída de la posición.

$(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>
InformationsquelleAutor Cudos | 2009-05-15

4 Comentarios

  1. 51

    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 bonito y limpio de codificación.

    • Poco tarde a la fiesta, pero que $(this).append($("ui.draggable").clone());, que debe ser $(this).append($(ui.draggable).clone()); ? (sin las comillas), ya que se carga el objeto de la devolución de llamada parámetro?
  2. 25

    Encontré esta pregunta a través de Google. Yo no podía mantener las posiciones de ajuste para el contenedor, hasta que he cambiado de ‘interfaz de usuario.la posibilidad de arrastrar’ a ‘de iu.ayudante’ cuando anexar:

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

    Para aquellos que están tratando de cambiar la posición de la bajó elemento. Echa un vistazo aquí.

    Jquery arrastrar /soltar y el clon.

    Realmente tuve que utilizar el código que se parece a

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

    hacerlo.

    • gracias, eso fue realmente útil
  4. 0

    Aquí está mi solución, permite arrastrar y soltar un clon, y luego reemplazarlo después de tan necesaria por otra arrastrar y soltar. También tiene una función de devolución de llamada parámetro que se pasa de nuevo la dejó caer div objeto, por lo que se puede hacer algo con el jquery seleccionado div, una vez caído.

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

Dejar respuesta

Please enter your comment!
Please enter your name here