Jquery UI draggable not scrolling the sortable container

Question

I have some draggable items(#draggable li) which i am dragging and dropping them in a sortable(#sortable).

The sortable is wrapped by two divs and the outermost div has overflow-y: scroll. The mechanism of drag and drop works fine until the sortable list expands and scrolls.

When I try to drag and directly drop an Item on the sortable, i cannot get the sortable scrollbar to auto-scroll in the way I want to go(say want to go up to drop above the first element or go down to drop below the last element). But when I try to drag and sort the items among themselves the scroll bar auto-scrolls while dragging.

Is it a bug or there is a fault the way my code works.

Here is the complete code:

<body>
    <ul id="draggable" class="connectedSortable">
        <li class="ui-state-default big">Item 1</li>
        <li class="ui-state-default big">Item 2</li>
        <li class="ui-state-default big">Item 3</li>
        <li class="ui-state-default big">Item 4</li>
        <li class="ui-state-default big">Item 5</li>
        <li class="ui-state-default big">Item 6</li>
    </ul>

  <div id="outerDiv">
    <div id="innerDiv">
      <ul id="sortable" class="connectedSortable">
      </ul>
    </div>
  </div>
</body>

//CSS

#sortable, #draggable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0 0 2.5em; 
  margin-right: 10px; 
}
#sortable li, #draggable li { 
  margin: 0 5px 5px 5px; 
  padding: 5px; 
  font-size: 1.2em; 
  width: 120px; 
}
.marker{
    background: none repeat scroll 0 0 #DDDDDD;
    border-bottom: 1px solid #BBBBBB;
    border-top: 1px solid #BBBBBB;
    display: block;
    height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #666;
    font-size: 18px;
    font-style: italic;
}

#outerDiv{
    background: none repeat scroll 0 0 #EEEEEE;
    height: 100%;
    right: 0;
    position: absolute;
    overflow-y: scroll; 
    top: 0;
    width: 300px;
}

#innerDiv{
    border: 1px solid #CCCCCC;
    min-height: 400px;
    position:absolute;
}
#sortable{
    width: 200px;
    padding: 10px;
    border : 1px solid black;
    min-height: 230px;
}

#draggable{
    position:absolute;
    top:0;
    left:0;
}
.big{
    height: 80px;
}

//JS

$(function() {
  $( "#sortable" ).sortable({
       placeholder: "marker",
       axis: "y",
  });

  $("#draggable li").draggable({
      helper: "clone",
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable"
  });
});

demo on fiddle http://jsfiddle.net/8KDJK/21/

Any help would be greatly appreciated. Thanks :)

score 6 · Accepted Answer · edited May 23 '17 at 11:46

6

I am not sure that it is a bug, but it is not in a classic scenario.

I spent a lot of time to find a workaround some months ago and here is my solution : http://jsfiddle.net/8KDJK/23/

It is working for months now without problem.

The idea is to append the element clone to the scrollable container durring the helper construction callback, then append the helper to the body using a setTimeout function after 1ms to be able to drag all around the web page.

  $("#draggable li").draggable({
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable",

      //Here is the workaround 
      //**********************

      containment: 'body',
      helper: function(){ 
        //Hack to append the element to the body (visible above others divs), 
        //but still bellonging to the scrollable container  
        $('#sortable').append('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>');   
        $("#clone").hide();
        setTimeout(function(){
            $('#clone').appendTo('body'); 
            $("#clone").show();
        },1);
        return $("#clone");
    }
  });

Link to my previous question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table

edited May 23 '17 at 11:46

Community

1
1

answered Jan 10 '13 at 20:55

sdespont

13,915
9
56
97

Hey that works. Maybe while dragging, my element was still appended to the body, hence it was not a part of that scrollable container. I tried to append it to the scrollable container on the 'over' event of the sortable, but it didnt work for me. Hence I would be using your workaround for now. Thanks :) – Mandeep Jain Jan 12 '13 at 05:51
1

Unfortunately, you can't re-set options durring dragging. – sdespont Jan 12 '13 at 11:22
Ohh, didnt knew that. Thanks. – Mandeep Jain Jan 14 '13 at 05:12
I just discovered that your solution, although works great iin FF and Chrome, doesnt work in IE 8. I tried debugging and searching for a solution, but couldnt find much. Could you know better ? – Mandeep Jain Jan 17 '13 at 06:17
1

Bad news for you, but the bright side is that I have tested my fiddle http://jsfiddle.net/QvRjL/134/ with IE8 and it is working. So check differences, it could be a CSS positioning problem. – sdespont Jan 17 '13 at 06:51
It works, had a trivial typo in my code which didnt go well with (sad)IE 8 – Mandeep Jain Jan 28 '13 at 13:09
Thanks a lot, this helped me a lot with a blocking issue. thanks! – Vincent Duprez May 11 '14 at 13:28
sdespont, it does seem to work in your fiddle, maybe position absolute has something to do with it, but i can't get it to work on simple UL with height and overflow:scroll http://jsfiddle.net/GDmac/9v6ce/ – GDmac May 23 '14 at 11:39
Amazing - been looking for a solution for this for months. – JoeTidee Dec 24 '15 at 18:21

score 2 · Answer 2 · answered Dec 18 '13 at 18:09

2

Solution:

Don't use overflow:auto;

But

overflow: visible;

answered Dec 18 '13 at 18:09

SirCumz

171
1
2
14

Overflow hidden on the sortable item can cause this problem too. – Tim Sep 18 '15 at 12:43

Jquery UI draggable not scrolling the sortable container

2 Answers2

Linked