draggable area using "scrollContainer:"

Feb 5, 2011 at 2:27 PM
Edited Feb 5, 2011 at 2:30 PM

A great project, very well done! It completely provided the solution I was looking for!

However, I'm using the scrollContainer as suggested, but I still run into a small problem. I used the example code and stripped it down to only the "#list1", so far so good, everything works perfectly fine. I changed dragBetween: to false and created a div around the "#list1" and gave it a with of 850px and height of 500px; as the code below shows.

#container { width:850px; height:500px; overflow:auto; border:1px solid black; }
<div id="container"><ul id="list1"> <li><div>1</div></li> <li><div>2</div></li></ul>
$("#list1").dragsort({ dragSelector: "div", dragEnd: saveOrder, scrollContainer: "#container", dragBetween: false, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });function saveOrder() { var data = $("#list1 li").map(function() { return $(this).children().html(); }).get(); $("input[name=list1SortOrder]").val(data.join("|")); };

I probably miss something very obvious, but can I only drag the "1" or "2" within the specified area of #list1 (= 350px;) and not within the 850*500 area. Hopefully someone can help me or point me in the right direction.


Feb 6, 2011 at 7:14 PM
Edited Feb 6, 2011 at 8:42 PM

My apologies, my instructions are a bit confusing. If dragBetween is set to false, list items cannot be dragged outside the list (behavior by design) but this needs to be set to true to allow you to drag the item outside the list in order to trigger the auto-scroll (originally this was just to allow you to drag it to a 2nd list hence it's description). What scroll container is, is some people wanted the ability to place the list inside a div with a scrollbar (overflow set to auto) and for that div to scroll instead of the browser (i.e. window the default). So in your case you can remove the container, set dragBetween to true and it should hopefully work for you.

I've reworded the help here to hopefully make it clearer, let me know if you think it can be clarified further in any way.

Sep 24, 2012 at 11:02 PM

follow up:

Hi, I believe that I have found a problem with the scrolling code.

For example, use this url on my development box: http://slideshowmaker.ath.cx/index.htm : 

If you drag one of the first few slides past the area so that the slider pane scrolls, then you grab one of the last items and try to move it left, you will see that the "selected" item gets drawn many pixels left of where the mouse really is.  It seems to lose track of the correct offset because its not taking into account the scrollContainer's scolled position.

I figured the scrollContainer's selector should be '.slides-wrapper .slider-pane' if I understood the docs but seems '.slider-pane .slider-timeline' works better (actually will scroll).

Or am I missing something?



Aug 12, 2013 at 8:07 PM
Just for anyone running into this issue, I added the following to the setPos function right before the last line where it sets the css of the draggedItem and it worked for me (vertically anyway).
if ($(this.container).attr("data-listidx") == $(opts.scrollContainer).attr("data-listidx")) top += $(opts.scrollContainer).scrollTop();