Jquery UI Sortable, Scrolling (Exemple jsFiddle)

Vieille question, mais je me suis battu avec cette question pendant quelques heures aujourd’hui, alors je me suis dit que je partagerais ce que j’ai appris.

Le défilement sortingable est une fonction du décalage du scrollParent, de sa position de défilement actuelle, de la position de l’élément actuel et de la propriété scrollSensitivity. Le sortingable exécute _mouseStart lorsque vous commencez à faire glisser. Cela définit le scrollParent et met en cache son décalage pour le sorting en cours. Forts de cette connaissance, nous pouvons faire un petit remaniement dans le gestionnaire d’événements over:

over: function (event, ui) { ui.item.data('sortableItem').scrollParent = ui.placeholder.parent(); ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset(); } 

Over se déclenche lorsque l’élément déplacé change de conteneur. L’espace réservé a déjà été déplacé vers le nouveau conteneur lorsque vous appuyez sur l’événement over. Le code obtient le nouveau scrollParent et met en cache le décalage.

J’ai fourré le violon de Tats_innit par souci de brièveté: http://jsfiddle.net/3E2Hg/84/

Le scrollParent est référencé à d’autres endroits dans la structure de l’événement, donc je ne suis pas sûr que ce soit à l’épreuve des balles. Néanmoins, je pense que c’est un bon sharepoint départ. Si je rencontre des pièges, je mettrai à jour cette réponse.

Démo de travail http://jsfiddle.net/3E2Hg/1/

S’il vous plaît, faites-moi savoir si j’ai oublié quelque chose, et slo voir ma réponse précédente autour de ceci: Faites défiler automatiquement div div en tout en faisant glisser

Comportement : Maintenant, la div vers laquelle vous faites glisser défile également. (code de repos est ci-dessous)

J’espère que cela t’aides,

code

 $(function() { var sortlists = $("#List1, #List2").sortable({ tolerance: 'pointer', connectWith: '#List1, #List2', helper: 'original', scroll: true }).on('scroll', function() { sortlists.scrollTop($(this).scrollTop()); }); });​ 

Vous avez juste besoin d’append overflow: auto; à l’élément parent, que ce soit ul ou #element , ou ce que vous avez.