jquery ui arrastrable desplazándose dentro del contenedor

Tengo una list desorderada y he agregado funcionalidad arrastrable a cada elemento de la list utilizando jquery ui draggable. la list está dentro de un div con id = "contenido". Aquí está la instantánea de mi list UL

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 list dentro del contenedor (es decir, div con id = "contenido") y cuando el mouse está en el borde del borde div o tamaño, el contenedor también debe desplazarse para que yo podría moverse hacia arriba y hacia abajo dentro del contenedor.

Por ejemplo, si quería arrastrar el último elemento de la list de la list al primero de la list, así 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

One Solution collect form web for “jquery ui arrastrable desplazándose dentro del contenedor”

Prueba a cambiar a jQuery 1.7.2

(No se supone que funcione con 1.8, pero creo. Puede encontrar la última versión compatible dentro del rar cuando descarga jQuery UI)

  • jQuery UI - Convierta jQuery UI Datepicker en hora UNIX
  • jQuery UI Slider -> con soporte para mousewheel?
  • jquery ui out: la function no se activa
  • Complementos de Leaflet Slider y Marker Cluster
  • JQuery UI orderable en un contenedor desplazable: la position de desplazamiento "salta" al orderar
  • Cambiar el tamaño de un dialog de IU de jquery dinámicamente
  • mostrando el progreso de la barra de progreso con la request de ajax
  • jQuery Datepicker con FontAwesome Button?
  • ¿Cómo no permitir que se muevan las partes de la list de jquery orderables?
  • interferencia de contenido de jquery-ui-tabs
  • jQuery ui datepicker no funciona en Firefox
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.