Jquery UI draggable not scrolling the sortable container

问题

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 :)

回答1:

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