jQueryUI: eliminar correctamente un elemento que se puede arrastrar

Question

Estoy trabajando en un editor visual que requiere elementos que el usuario puede agregar, eliminar y arrastrar a su gusto. Cada elemento es un div hecho arrastrable con jQueryUI. Los nuevos elementos se anexan a un padre div que representa el espacio de trabajo. Cada elemento tiene un botón dentro de sí mismo para eliminarlo. Todo esto funciona genial

El problema que tengo es que cuando elimino un elemento que no fue el más recientemente creado, todos los otros elementos que se pueden arrastrar cambian de posición. Esto parece ser causado por los elementos que se pueden arrastrar usando el posicionamiento relative.

Por el momento, mi función de eliminación simplemente llama a $('#item-x').remove(). ¿Hay alguna otra manera en que debería eliminar los elementos arrastrables?

Answer 1

Resulta que este questi on es un duplicado de this one, pero estaba buscando algo incorrecto.

La solución es simplemente cambiar los elementos para tener un posicionamiento absoluto, según la otra pregunta. He encontrado, sin embargo, que mis elementos siempre volverían a posicionamiento relativo, incluso cuando he especificado en su CSS que debe ser absoluta, por lo que ahora hago:

$('#item-x').draggable().css("position", "absolute"); 

Answer 2

Pruebe usar .draggable("destroy") en su lugar. Lo he usado bien.

Usted puede ver este método y todos los otros métodos, opciones y eventos en jqueryUI Draggable destroy

actualización

momento pensé que su problema era otra cosa. Lo que debe hacer es cambiar su enfoque, ya que eliminar el elemento de dom no tiene nada que ver con que un elemento sea draggable. Necesitarás encapsular el elemento que se puede arrastrar con un elemento, por ejemplo, un div con la misma altura y ancho que el que se puede arrastrar, luego simplemente destruye el archivo arrastrable como desees.

HTML:

<div id="conteiner"> 
    <div class="dragConteiner"><div id="draggable1" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable2" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable3" class="draggable"></div></div> 
</div> 

jQuery:

$(function(){ 

    $("#draggable1").draggable(); 
    $("#draggable2").draggable(); 
    $("#draggable3").draggable(); 
    $("#draggable2").on('mouseup',function(){ 
    alert('bye draggable!'); 
    $(this).draggable('destroy'); 
    //in case you like to use if after 
    //$(this).hide(); 
    //as in your code 
    $(this).remove(); 
    }) 
}) 

CSS:

.draggable{ 
    height:50px; 
    width:50px; 
    background: green;  
} 

.dragConteiner{ 
    height:50px; 
    width:50px; 
    margin-top:5px;  
} 

#conteiner{ 
    margin-top:25px; 
    margin-left:25px; 
} 

Un ejemplo jsfiddle

Answer 3

Por algunas razones destruir el funcionamiento no está funcionando. Si desea eliminar por completo la propiedad de arrastre del elemento, intente esto

var temp = $("#dragItem").draggable().remove(); 

Esto devuelve el elemento eliminando la propiedad de arrastrar. Capture en una variable temp y asígnelo al elemento padre

$(temp).appendTo("#parentContainer") 

Avíseme si esto funciona.