我希望用户能够左右拖动一个水平菜单栏.我意识到有很多转盘和滑块库有这种行为 – 但没有一个适合这种情况.
当用户拖动LI时,可以将新的x偏移信息传递到第一个LI的左边距吗？
我在这里刺了一口气：http://jsfiddle.net/n92ng9uz/
上述小提琴的主要问题是偏移仍然适用于个人LI,如果我阻止事件冒泡,拖动不再平稳.
感谢您的帮助/指导！
解决方法
由于您在注释中指定了在第一个li元素上使用margin-left的要求,并且不修改ul的位置,所以我确信使用jQuery UI draggable不能轻松完成.如果我们要使这个可以拖拉的话,我们不会在另一个lis上捕捉到鼠标事件,如果我们要让这个ul拖动,我们不能轻易地使它只影响第一个li的margin-left的位置.
这是一个直接使用鼠标事件的解决方案的实时演示,而不是使用jQuery UI：
var firstLI = $('li:first-child');
var initx = 0;
var dragstartx = 0;
var dragging = false;
$("ul").mousedown(function(e) {
dragging = true;
dragstartx = e.pageX;
initx = parseInt(firstLI.css("marginLeft"),10);
});
$("ul").mousemove(function(e) {
if (dragging) {
firstLI.css("marginLeft",(initx + e.pageX - dragstartx) + "px");
}
});
$("ul").mouseleave(function(e) {
dragging = false;
});
$("ul").mouseup(function(e) {
dragging = false;
});
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul > li {
display: inline-block;
padding: 10px;
}
ul > li:nth-child(odd) {
background: orangered;
}
ul > li:nth-child(even) {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
JSFiddle版本：https://jsfiddle.net/n92ng9uz/2/
