分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery UI可拖动不滚动可排序容器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一些可拖动的项目(#draggable li),我将它们拖放到可排序的(#sortablE)中.

sortable由两个div包装,最外面的div有overflow-y：scroll.拖放机制工作正常,直到可排序列表扩展和滚动.

当我尝试拖动并直接在可排序项上放置一个项目时,我无法使用可排序的滚动条以我想要的方式自动滚动(比如想要在第一个元素上方放下或者向下移动到下方最后一个元素).但是当我尝试在它们之间拖动和排序项目时,滚动条会在拖动时自动滚动.

它是一个错误还是我的代码工作方式有错.

这是完整的代码：

<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"
  });
});

小提琴http://jsfiddle.net/8KDJK/21/上的演示

任何帮助将不胜感激.谢谢：)

解决方法

我不确定它是一个错误,但它不是一个经典的场景.

几个月前我花了很多时间找到解决方法,这是我的解决方案：http://jsfiddle.net/8KDJK/23/

它现在正在工作几个月没有问题.

我们的想法是在辅助器构造回调期间将元素clone附加到可滚动容器,然后在1ms后使用setTimeout函数将帮助器附加到body,以便能够在Web页面周围拖动.

$("#draggable li").draggable({
      cursor: "move",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");
    }
  });