jquery elemento arrastrable ya no se puede arrastrar después de la caída

Quiero ser capaz de arrastrar y soltar repetidamente el mismo elemento fuente.jquery elemento arrastrable ya no se puede arrastrar después de la caída

En el momento en que se arrastra una imagen, se clona con éxito, es decir, la imagen original permanece y el clon cae suavemente en su nuevo lugar, pero la imagen anterior ya no se puede arrastrar. Inspeccionar el elemento muestra class como un atributo (sin valor), por ejemplo, no class="ui-draggable"

Como verás he tratado de volver a habilitar la capacidad de arrastre en el original después de la clonación, pero no está funcionando.

Aquí está el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
    <title></title> 
    <script language="javascript" type="text/javascript"> 
    var copy = 0; 
    var dragOptions = { 
     helper: 'clone', 
     cursor: 'hand', 
     revert: 'invalid' 
    }; 
    $(document).ready(function() { 
     $("img").draggable(dragOptions); 
     $("ul#bag > li").droppable({ 
     drop: function (event, ui) { 
      copy++; 
      var clone = $(ui.draggable).clone().attr("id", "img_" + copy); 
      $(this).append(clone); 
      clone.css("left", 0).css("top", 0); 
      $(ui.draggable).draggable(dragOptions); 
     } 
     }); 
    }); 
</script> 
    <style type="text/css"> 
    li 
    { 
     position: relative; 
     float: left; 
    } 

    img 
    { 
     cursor: move; 
    } 

    div, li 
    { 
     display: block; 
     width: 160px; 
     height: 123px; 
     margin: 2px; 
     border: solid 1px gray 
    } 

    .clear 
    { 
     clear: both; 
    } 
    </style> 
</head> 
<body> 

    <ul id="bag"> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 

    <ul id="shop"> 
    <li><img id="img1" src="images/p1.jpg" /></li> 
    <li><img id="img2" src="images/p2.jpg" /></li> 
    <li><img id="img3" src="images/p3.jpg" /></li> 
    </ul> 

    <div class="clear" id="dustbin" style="background-color:Black;"></div> 
</body> 
</html>

Fuente

2011-02-16 jenson-button-event

lo tanto, parece que una vez que se arrastra el elemento, el widget se puede arrastrar llama a su propia función destroy() que elimina cualquier apariencia de draggability del elemento.

Sin manera perceptible de anular esto con opciones o eventos, hemos anulado con la fuerza bruta en document.ready:

$ .ui.draggable.prototype.destroy = function (ul, elemento) { };

Esto ahora funciona.

Fuente

2011-02-17 09:23:07

Gracias por encontrar una solución. – Couto

Esto no cambió nada para mí, de hecho, algunas pruebas simples muestran que el método de destrucción nunca se llama en caída. –

Gracias por encontrar una solución. Sin embargo, realmente necesitaba el método de destrucción ... así que después de usar tu solución, asigné el método de destrucción nativa a otro método ... por lo que tu solución con la mía sería algo como esto;

$.ui.draggable.prototype.destroy = function (ul, item) { }; 
$.ui.draggable.prototype.remove = function() { 
    if(!this.element.data('draggable')) return; 
    this.element 
     .removeData("draggable") 
     .unbind(".draggable") 
     .removeClass("ui-draggable" 
      + " ui-draggable-dragging" 
      + " ui-draggable-disabled"); 
    this._mouseDestroy(); 

    return this; 
};

Fuente

2011-02-20 22:04:58 Couto

Sé que esto es viejo, pero quería ofrecer otra solución para aquellos que necesitan para mantener el .destroy y le gustaría mantener el mismo nombre.

Hice una función de aplicar el estado draggable a un elemento ...

function MakeDraggable(ele) { 
    ele.draggable({ revert: "invalid" }); 
}

A continuación, en el interior de la propiedad drop de los elementos .droppable Simplemente ...

MakeDraggable(ui.draggable);

Esta re -permite el estado arrastrable al elemento.

Fuente

2012-07-21 23:06:34 Jared

¿Por qué no debería simplemente agregar $ (arrastrable) .draggable(); dentro de tu gota? Esto funciona exactamente igual que su solución, pero con algunas líneas menos. –

jquery elemento arrastrable ya no se puede arrastrar después de la caída

Respuesta

Cuestiones relacionadas