传递/更改jQuery UI拖动事件

Question

我希望用户能够左右拖动水平菜单栏.我意识到有很多旋转木马和滑块库都有这种行为 - 但它们都不适合这种情况.

当用户拖动LI,可以将它传递新的x-偏移信息提供给左边距的的第一个 LI？

我在这里捅了一下:http://jsfiddle.net/n92ng9uz/

上述小提琴的主要问题是偏移仍然适用于个人LI,如果我防止事件冒泡,则拖动不再平滑.

感谢您的帮助/指导!

Answer 1

由于您在注释中指定要求margin-left在第一个li元素上使用，并且不修改 的位置ul，所以我非常确定使用 jQuery UI 可拖动不能轻松完成此操作。如果我们要使可li拖动，我们不会捕获其他lis 上的鼠标事件，并且如果我们要使ul可拖动，我们不能轻易地使其仅影响margin-left第一个的li，而不影响 的位置ul。

以下是直接使用鼠标事件而不是使用 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/