example - jQuery ui elementos arrastrables no ''arrastrables'' fuera de desplazamiento de div
sortable jquery ejemplos (2)
¡En mi caso, esto me lo resolvió y funciona perfectamente!
ACTUALIZADO
$(".amigo").draggable({
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: ''body'',
scroll: false
});
Tengo muchos elementos (etiquetas href flotantes) en un div con un alto / ancho establecido, con desplazamiento configurado para overflow: auto en el CSS.
Esta es la estructura de los divs:
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div></div>
los padres div, ''tf_div_tagsReturn'' y ''tf_div_tagsDrop'' flotarán al final uno junto al otro.
Aquí está el jQuery que se ejecuta después de que todos los elementos ''arrastrables'' se hayan creado con el nombre de clase ''tag_cell'',:
$(function() {
$(".tag_cell").draggable({
revert: ''invalid'',
scroll: false,
containment: ''#tagFun_div_main''
});
$("#tf_dropBox").droppable({
accept: ''.tag_cell'',
hoverClass: ''tf_dropBox_hover'',
activeClass: ''tf_dropBox_active'',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
como dije anteriormente, los elementos que se pueden arrastrar se pueden arrastrar dentro de div ''tf_div_tagsReturn'', pero no se arrastran visualmente fuera de ese div principal. Digno de notar, si estoy arrastrando uno de los elementos arrastrables, y muevo el mouse sobre el div desplegable, con id ''tf_dropBox'', entonces se dispara la clase hoverc, ya no puedo ver el elemento arrastrable.
Esta es mi primera vez que utilizo jQuery, así que con suerte me falta algo súper obvio. He estado leyendo la documentación y buscando foros hasta ahora para no prevalecer :(
ACTUALIZAR:
muchas gracias a Jabes88 por proporcionar la solución que me permitió lograr la funcionalidad que estaba buscando. Aquí es a lo que mi jQuery terminó pareciéndose:
$(function() {
$(".tag_cell").draggable({
revert: ''invalid'',
scroll: false,
containment: ''#tagFun_div_main'',
helper: ''clone'',
start : function() {
this.style.display="none";
},
stop: function() {
this.style.display="";
}
});
$(".tf_dropBox").droppable({
accept: ''.tag_cell'',
hoverClass: ''tf_dropBox_hover'',
activeClass: ''tf_dropBox_active'',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
¿Vas a permitir más de una instancia con tus objetos arrastrables? luego usa la opción de ayuda y anexar:
$(".tag_cell").draggable({
helper: ''clone'',
appendTo: ''div#myHelperHolder''
});
Luego, en su CSS puede establecer que el zindex de div # myHelperHolder sea 999. De lo contrario, intente simplemente usar la opción zindex:
$(".tag_cell").draggable({
zIndex: 999
});
También consideraría establecer addClasses para evitar que el complemento agregue todas esas clases molestas que desperdician la velocidad del procesador.
ACTUALIZAR: TENGO UNA NUEVA SOLUCIÓN
De acuerdo, después de jugar con él por un tiempo, se me ocurrió esto: la opción de desplazamiento no impide que el niño se oculte con desbordamiento. He leído algunas otras publicaciones y no puedo encontrar una sola solución. Pero se me ocurrió algo de trabajo que hace el trabajo.
<!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="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(OnLoad);
function OnLoad(){
var dropped = false;
$(".tag_cell").draggable({
addClasses: false,
revert: ''invalid'',
containment: ''#tagFun_div_main'',
helper: ''clone'',
appendTo: ''#tagFun_div_helper'',
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide");
}
}
});
$("#tf_dropBox").droppable({
accept: ''.tag_cell'',
hoverClass: ''tf_dropBox_hover'',
activeClass: ''tf_dropBox_active'',
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
}
</script>
<style>
div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
span.tag_cell.hide { display:none; }
div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
div#tf_dropBox.tf_dropBox_active { background:#333; }
</style>
</head>
<body>
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
</div>
<div id="tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div>
</div>
<div id="tagFun_div_helper">
<!-- this is where the helper gets appended for temporary use -->
</div>
</body>
</html>
Pegué todo mi código para que puedas probarlo. Aquí hay una breve descripción: cuando comienza a arrastrar un elemento, lo oculta, lo clona y luego lo copia a un contenedor fuera del área de desbordamiento. Una vez que se cae, quita el original y mueve el clon a la zona de colocación. Genial, así que ahora hemos solucionado ese problema de desbordamiento, pero nos encontramos con algunos otros. Cuando suelta el elemento de clonación en la zona de colocación, desaparece. Para evitar que esto sucediera, utilicé este método:
$.ui.ddmanager.current.cancelHelperRemoval = true;
Ahora hemos impedido que se elimine el helper, pero permanece en "div # tagFun_div_helper" mientras que el elemento original que se puede arrastrar ha reaparecido.
ui.helper.appendTo(this);
Esto transferirá el ayudante de "div # tagFun_div_helper" a nuestra zona de colocación.
dropped = true;
Esto indicará a nuestra función de detención que elimine el elemento original del grupo en lugar de eliminar la clase ".hide". ¡Espero que ayude!