jquery ui desplazable arrastrando dentro del contenedor

Tengo una lista desordenada y he agregado funcionalidad arrastrable a cada elemento de la lista usando jquery ui draggable. la lista está dentro de un div con id = "contenido". Aquí está la foto de mi lista ULjquery ui desplazable arrastrando dentro del contenedor

enter image description here

Aquí está el código que he escrito:

<script src="../../jquery-1.8.0.js"></script> 
<script src="../../ui/jquery.ui.core.js"></script> 
<script src="../../ui/jquery.ui.widget.js"></script> 
<script src="../../ui/jquery.ui.mouse.js"></script> 
<script src="../../ui/jquery.ui.draggable.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(".draggable").draggable({ 
     scroll: true, 
     scrollSensitivity: 100, 
     revert: true, 
     containment: '#content', 
     zIndex: 999990, 
     revertDuration: 100, 
     delay: 100 
    }); 
}); 
</script> 
<div style="width:200px;height:300px;overflow:auto;" id="content"> 
    <ul> 
    <li class="draggable">One</li> 
    <li class="draggable">Two</li> 
    <li class="draggable">Three</li> 
    <li class="draggable">Four</li> 
    <li class="draggable">five</li> 
    <li class="draggable">six</li> 
    <li class="draggable">Seven</li> 
    <li class="draggable">Eight</li> 
    <li class="draggable">Nine</li> 
    <li class="draggable">Ten</li> 
    <li class="draggable">Eleven</li> 
    <li class="draggable">Twelve</li> 
    <li class="draggable">Thirteen</li> 
    <li class="draggable">Fourteen</li> 
    <li class="draggable">Fifteen</li> 
    <li class="draggable">Sixteen</li> 
    <li class="draggable">Seventeen</li> 
    <li class="draggable">Eighteen</li> 
    <li class="draggable">Nineteen</li> 
    <li class="draggable">Twenty</li> 
     </ul> 
</div>

Lo que me gustaría hacer es cuando estoy arrastrando cualquier elemento de la lista dentro del contenedor (es decir, div con id = "contenido") y cuando el mouse está en el borde del borde div o del tamaño, el contenedor también debe desplazarse para poder moverlo hacia arriba y hacia abajo dentro del contenedor.

Por ejemplo, si quería arrastrar el último elemento de la lista al primero en la lista, cuando el mouse esté en el extremo superior del borde div, el contenedor (en nuestro caso div) también debería desplazarse automáticamente . ¿Es esto un error en jquery ui draggable? Por favor, ayuda

Fuente

2012-09-07 sonam

I han estado buscando páginas de demo de jquery ui, pero no tanto, también han buscado en Google con poco éxito – sonam

[jQuery.Drag] (http://javascriptmvc.com/docs.html#!jQuery.Drag) tiene un [desplazamiento ] (http://javascriptmvc.com/docs.html#!jQuery.Drag.prototype.scrolls) parámetro que funciona (hay una demostración en la página). ¿Tal vez ver cómo funciona ese código e implementarlo en el comportamiento de jQuery arrastrables? –

¿No es esto ya manejado por 'scroll: true'? Parece que ya está haciendo lo que describes en Chrome al menos http://jsfiddle.net/SqNx6/ –

Trate de degradar a jQuery 1.7.2

(Su no supone que funciona con 1,8 embargo, creo. Puede encontrar la versión compatible más tardar dentro del rar al descargar jQuery UI)

Fuente

2012-09-12 14:54:23

Probablemente también sea la razón por la que funciona con el violín creado por James Montagne. –

jquery ui desplazable arrastrando dentro del contenedor

Respuesta

Cuestiones relacionadas