jquery ui - examples - Elemento arrastrable oculto fuera del contenedor
jquery drop event (4)
Al utilizar jQuery UI, intento crear una interfaz con dos contenedores desplazables, cada uno con muchos elementos que se pueden arrastrar. El usuario puede arrastrar un elemento de un contenedor a otro.
La característica de caída no es un problema . Cuando se suelta, el elemento se separa y se vuelve a crear en el lugar correcto debajo de su nuevo padre.
Mi problema es que el elemento arrastrable no se puede mostrar fuera de su contenedor cuando el contenedor tiene una position:relative; aplicado , por lo que al arrastrar, el elemento desaparecerá cuando se mueva fuera de los límites del contenedor.
Este comportamiento predeterminado tiene sentido, ya que normalmente el usuario querría arrastrar un elemento dentro de su contenedor. Como una solución, había asumido que la solución sería usar la propiedad "appendTo", que pensé que movería el elemento fuera de su contenedor, pero lamentablemente esto no parece haber tenido ningún efecto.
DOM: (cada vista es desplazable y cada contenedor tiene una posición: relativa y es tan grande como debe ser para contener todos los elementos)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
Javascript:
$(''div.card'').draggable({
appendTo: ''body'',
scroll: false //stops scrolling container when moved outside boundaries
});
Consulte JSFiddle para obtener una explicación simplificada del problema. No quería inflar el ejemplo con código desplegable, así que esto solo ilustra el problema del arrastre. http://jsfiddle.net/Em7Ak/
Muchas gracias de antemano.
Agregar posición: absoluta al estilo de tarjeta:
div.card {
position:absolute;
width:100px; height:50px;
border:1px black solid;
background-color:orange;
text-align:center; vertical-align:middle;
}
No estoy seguro si esto solucionará su problema exacto, pero me encontré con esta pregunta buscando la misma respuesta y esto es lo que encontré.
En las opciones para .draggable (), pase el helper:''clone'' para hacer un clon del elemento automáticamente para que pueda ser arrastrado fuera del contenedor. Y usa appendTo:''body'' para ponerlo al final de la etiqueta <body> . Entonces, en mi caso, mis opciones se parecen a esto, agregando en revert:''invalid'' para hacer que vuelva a aparecer si no se descarta en algún lugar válido:
jQuery(".myselector").draggable({
helper: ''clone'',
revert: ''invalid'',
appendTo: ''body''
});
Tuve un problema similar hace algunos meses.
Mi necesidad era poder usar el desplazamiento automático de un contenedor grande de otros
Esta es mi pregunta para obtener más detalles, JqueryUI, arrastre los elementos a las celdas de una div desplegable drogable que contenga una gran tabla
Encontré una solución. La idea es agregar el clon de elemento al contenedor desplazable durante la devolución de llamada de construcción auxiliar, luego anexar el ayudante al cuerpo utilizando una función setTimeout después de 1ms. La posición de ayudante debe asignarse en la posición del mouse para evitar el problema de compensación.
Aquí está mi solución (JSFiddle parece estar inactivo ahora, pruébelo más tarde si no aparece ningún código en la ventana): http://jsfiddle.net/QvRjL/134/
$(''[id^="drag-"]'').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
appendTo: ''body'',
containment: ''body'',
scroll: true,
helper: function(){
//Hack to append the cartridge to the body (visible above others divs),
//but still belonging to the scrollable container
$(''#container'').append(''<div id="clone" class="cartridge">'' + $(this).html() + ''</div>'');
$("#clone").hide();
setTimeout(function(){
$(''#clone'').appendTo(''body'');
$("#clone").show();
},1);
return $("#clone");
}
});
});
utilice el ayudante "clonar" y oculte el elemento mientras lo arrastra y muéstrelo de nuevo al detenerse.
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});