jQuery se puede arrastrar y appendTo no funciona

Uso jQuery ui se puede arrastrar pero la opción appendTo no funciona. Sin embargo, otras opciones como la contención o la cuadrícula funcionan correctamente. Aquí está el código:jQuery se puede arrastrar y appendTo no funciona

HTML

<div id="demo"> 
</div> 
<div id="sidebar"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
</div>

guión

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });

CSS

#demo { 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
} 
#draggable { 
    background: red; 
    width: 50px; 
    height: 50px; 
} 
#sidebar { 
    float: left; 
    width: 300px; 
} 
.item { 
    cursor: pointer; 
    background: black; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
}

aquí es una demostración en vivo: http://jsfiddle.net/fzjev/

Fuente

2012-03-10 MatthewK

Parece que para la ap Opción pendTo para que se reconozca que el elemento que se está arrastrando debe estar fuera del cuerpo.

De jQuery UI 1.8.18 (alrededor de la línea 275)

if(!helper.parents('body').length) 
    helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo));

En su ejemplo la sentencia if se evalúa como falsa, por lo que la lógica appendTo no se dispara.

Fuente

2012-03-10 16:28:39

http://jsfiddle.net/fzjev/ arrastrar un elemento, se verá que es posible arrastrar dentro de la #demo pero el

no se agrega dentro del #demo. – MatthewK

Eclipsé mi respuesta anterior (que en realidad era más una pregunta) y la actualicé con algo más parecido a una respuesta. Sinceramente, no estoy seguro de por qué está configurado tal como está, pero al menos sabemos lo que está sucediendo ahora. –

aquí hay un error abierto sobre el problema - Draggable: appendTo option doesn't work together with helper: 'original'.

La solución sugerida es utilizar helper: 'clone' y ocultar/mostrar el original al iniciar/detener el arrastre.

p. Ej.

$('.draggyThing').draggable({ 
     appendTo: '.dropArea', 
     helper: 'clone', 
     start: function (event, ui) { 
      $(this).hide(); 
     }, 
     stop: function (event, ui) { 
      $(this).show(); 
     } 
    });

Es probable que luego desea añadir manualmente sus draggables en drop de un elemento droppable.

$('.dropArea').droppable({ 
     accept: '.draggyThing', 
     drop: function (event, ui) { 
      $('.dropArea').append(ui.draggable); 
     } 
    });

Fuente

2013-05-13 13:58:58 RYFN

Esto en realidad parece ser más una respuesta a la pregunta del OP y una solución para tener el mismo comportamiento de lo que se esperaría. –

Jquery Sortable funciona de la misma manera, pero ordenable se inicia en el elemento container de los elementos ordenables, por lo que querrá usar 'ui.item.hide()/show()' en lugar de '$ (this)' en ese caso –

En mi caso, funcionan bien estos ejemplos:

$("[drag='true']").draggable({ 
    drag: handleDragDrag, 
    start: handleDragStart, 
    stop: handleDragStop, 
    helper: 'clone', 
    appendTo: 'body' 
}) 
function handleDragStart(ev, ui) { 
    $(this).show(); 
} 
function handleDragDrag(ev, ui) { 
} 
function handleDragStop(ev, ui) { 
    $(this).show(); 
}

Fuente

2016-09-12 11:23:54 lmcDevloper

jQuery se puede arrastrar y appendTo no funciona

Respuesta

Cuestiones relacionadas