Geek Answers Handbook

JQuery UI, Draggable, Droppable, Auto Scroll

I have a set of dropable li elements that accept a draggable icon. The list of elements is in the scrollable div element. I have compiled a simple example here: http://www.nerdydork.com/demos/dragscroll/

I am wondering if there is a way to autoscroll a list of items when dragging and dropping an item. For example, let's say you are somewhere in the middle, for example http://www.nerdydork.com/demos/dragscroll/#j . When you approach the top of the div, it will begin to scroll up, as it approaches the bottom of the div, it will begin to scroll down.

Does anyone know how to do this using jQuery?

UPDATE

I'm getting closer. I created a fixed div on the top and bottom of the container div. When hovering over it, autoscrolling is launched using http://plugins.jquery.com/project/aautoscroll

Now the problem is that when I hang over the bottom area, it messes up my draggable letters. It just seems like a problem with the lower auto scroll area.

To see the error I'm talking about, watch this short video: http://screencast.com/t/JBFWzhPzGfz

Please note that when autoscrolling down, the cursor is NOT above the right letter. Towards the end of the video, you can see that if you hover over the left margin of the list, it somehow resets and seems to work again.

+6
jquery scroll draggable droppable
source share
2 answers

Setting the refreshPositions: true option for dragging will cause jQuery to recalculate the offsets for each mouse event. This should solve your problem.

+5
source share

you can also use the interval function: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { $("#sortableContainer").append('<div class="sortable"></div>'); $("#droppableContainer").append('<div class="droppable"></div>'); }; var adding = 0 var scrollInterval = null; $("#sortableContainer").sortable({ refreshPositions: true, start: function (e, ui) { scrollInterval = setInterval(function () { var foo = $("#droppableContainer").scrollTop(); $("#droppableContainer").scrollTop(foo + adding); }, 50) }, stop: function (e, ui) { clearInterval(scrollInterval); }, sort: function (e, ui) { var top = e.pageY - $("#droppableContainer").offset().top if (top < 10) { adding = -15 } else if (top > $("#droppableContainer").height() - 10) { adding = 15 } else { adding = 0 } }, }); $(".droppable").droppable({ hoverClass: "active", accept: ".sortable", drop: function (event, ui) { ui.draggable.remove(); }, })
0
source share

More articles:


All Articles