Jquery slim scroll与jquery UI sortable的问题

Question

Jquery slim scroll与jquery UI sortable的问题

javascriptjqueryhtmlcssjquery-ui-sortable

9

您好，我遇到了一个问题，我正在使用jquery的slim scroll插件与jquery sortable。问题在于当我将项目从一个列表项拖动到另一个列表项时，右侧的滚动条不会随之移动，因此如果我要将列表项放置到最后一个列表区域，除非我使用mousewheel，否则无法到达那里。那么，在我将项目从一个列表区域拖动到另一个列表区域时，如何绑定滚动条位置？以下是代码-

$(function() {
   $("ul.droptrue").sortable({

     revert: 'invalid',
     connectWith: "ul"
   });


   $("#sortable1, #sortable2, #sortable3").disableSelection();


   $('.ScrollableAreanew ').slimScroll({
     height: '400',
     width: '100%',
     alwaysVisible: true,
     color: 'rgb(15,170,255)',
     railOpacity: 1,
     opacity: 1,
     size: '5px',
     position: 'right',
     allowPageScroll: false,


   });
 });

#sortable1,
#sortable2,
#sortable3 {
  list-style-type: none;
  margin: 0;
  float: left;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 100%;
  margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 100%;
  border: 1px solid #000;
  margin-bottom: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="ScrollableAreanew">
  <ul id="sortable1" class="droptrue">
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
  </ul>
  <ul id="sortable2" class="droptrue">
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
  </ul>
  <ul id="sortable3" class="droptrue">
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
  </ul>
</div>

- Sahil Dhir

是的，你说得对，我的错误，我离题了。 - user2560539

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Senjuti Mahapatra · Accepted Answer

这里我们需要做的是：

获取鼠标位置 - 当我们在 .ScrollableAreanew 内部移动时，Y 坐标会发生变化。
每当一个可排序的项目被移动（使用 sort 事件），就使用 scrollTo 将 slimScroll 移动到滚动位置。

sort 事件在排序过程中触发。有关更多详细信息，请参见此处。

$(function() {
  var currentMousePos = { x: -1, y: -1 };
   $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate
   });
  
  $("ul.droptrue").sortable({
     sort : function(event, ui) { // This event is triggered during sorting.
     var scrollTo_int = currentMousePos.y + 'px';
    $(".ScrollableAreanew").slimScroll({
     scrollTo : scrollTo_int, // scroll to mouse position
     height: '400',
     width: '100%',
     alwaysVisible: true,
     color: 'rgb(15,170,255)',
     railOpacity: 1,
     opacity: 1,
     size: '5px',
     position: 'right',
     allowPageScroll: false
  });
     },
     revert: 'invalid',
     connectWith: "ul"
   });

   $("#sortable1, #sortable2, #sortable3").disableSelection();

   $('.ScrollableAreanew ').slimScroll({
     height: '400',
     width: '100%',
     alwaysVisible: true,
     color: 'rgb(15,170,255)',
     railOpacity: 1,
     opacity: 1,
     size: '5px',
     position: 'right',
     allowPageScroll: false
   });
 });

#sortable1,
#sortable2,
#sortable3 {
  list-style-type: none;
  margin: 0;
  float: left;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 100%;
  margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 100%;
  border: 1px solid #000;
  margin-bottom: 5px;
}

.justAddingHeight
{
  height:100px !important;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="justAddingHeight"></div>
<div class="ScrollableAreanew">
  <ul id="sortable1" class="droptrue droppable">
    <li class="ui-state-default draggable">Can be dropped..</li>
    <li class="ui-state-default draggable">..on an empty list</li>
    <li class="ui-state-default draggable">Item 3</li>
    <li class="ui-state-default draggable">Item 4</li>
    <li class="ui-state-default draggable">Item 5</li>
  </ul>
  <ul id="sortable2" class="droptrue droppable">
    <li class="ui-state-highlight draggable">Cannot be dropped..</li>
    <li class="ui-state-highlight draggable">..on an empty list</li>
    <li class="ui-state-highlight draggable">Item 3</li>
    <li class="ui-state-highlight draggable">Item 4</li>
    <li class="ui-state-highlight draggable">Item 5</li>
  </ul>
  <ul id="sortable3" class="droptrue droppable">
    <li class="ui-state-highlight draggable">Cannot be dropped..</li>
    <li class="ui-state-highlight draggable">..on an empty list</li>
    <li class="ui-state-highlight draggable">Item 3</li>
    <li class="ui-state-highlight draggable">Item 4</li>
    <li class="ui-state-highlight draggable">Item 5</li>
  </ul>
</div>

编辑

不要在.ScrollableAreanew div内获取鼠标位置，而要获取文档中的鼠标位置。

注意：添加了一个高度为100px的带有类名为justAddingHeight的div作为POC。

希望这能解决您的问题。