您好我的情况是我使用jquery slim scroll plugin 和 jquery sortable 。问题是当我将项目从一个列表项目拖动到另一个列表项目时,右侧的滚动条不会随之移动,所以如果我必须将列表放到最后一个列表项目区域,除非我使用,否则我不能去那里的滚轮即可。 那么当我将项目从一个列表区域拖动到另一个列表区域时,如何绑定滚动条位置。以下是代码 -
$(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>
&#13;
答案 0 :(得分:2)
我们需要做的是
.ScrollableAreanew
sort
事件),请使用scrollTo
将slimScroll移动到滚动位置。 sort
事件。有关详细信息,请参阅here
$(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
});
});
&#13;
#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;
}
&#13;
<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>
&#13;
修改强>
.ScrollableAreanew
div中获取鼠标位置,而是在document
中获取鼠标位置。 注意: 在课程justAddingHeight
(身高为100px
)中添加了div作为POC。
希望这能解决你的问题。