Tengo una lista de carpetas tipo de situación en la que puedo arrastrar elementos de una carpeta a otra mediante jquery que se puede arrastrar/soltar. Los elementos de la carpeta son arrastrables y las carpetas son droppable. Estos están en un div que es lo suficientemente pequeño como para mostrar una barra de desplazamiento vertical.JQuery que se puede arrastrar: scroll no funciona cuando helper: se usa clon
Tengo "scroll: true" establecido en los elementos que se pueden arrastrar para que puedan hacer que el div se desplace. Cuando también uso 'helper:' clonar '' en los elementos que se pueden arrastrar, el desplazamiento ya no funciona.
¿Qué estoy haciendo mal?
Aquí hay un código muy simplificado:
<div style="background-color: red; width: 500px; height: 100px; overflow: auto;">
<table id="nfTable" class="treeTable">
<tr><td><span class="parent initialized expanded">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
</table>
</div>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
// draggable and droppable in here:
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$(".draggable").draggable({
// commenting the line below will make scrolling while dragging work
helper: "clone",
scroll: true,
revert: "invalid"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
// todo
}
});
});
</script>
Ha visto esto ?: http://jqueryui.com/demos/draggable/#option-scroll – Jason
@ Jason, sí. He visto esa demostración. Están usando el helper "original" (predeterminado), no "clonar". –