Question

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

当用户拖动/shared/images/image.png时，是否可以将新的x-offset信息传递到第一个 /shared/styles/style.css的左边距？< / p>

上述小提琴的主要问题是偏移仍然应用于单个sql_query_info，如果我阻止事件冒泡，则拖动不再平滑。

感谢您提供任何帮助/指导！

Answer 1

由于您在评论中指明需要在第一个margin-left元素上使用li，而不是修改ul的位置，我很确定它可以使用jQuery UI draggable轻松完成。如果我们要使li拖动，我们就不会在其他li上捕获鼠标事件，如果我们要使ul拖动，我们就不能轻易制作它仅影响第一个margin-left的{{1}}，而不影响li的位置。

这是一个直接使用鼠标事件而不是使用jQuery UI的解决方案的实时演示：

ul

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

JSFiddle版本：https://jsfiddle.net/n92ng9uz/2/

Answer 2

编辑：没关系......想通了......你需要移动位置差异留下的每个项目。我认为这就是你所追求的：http://jsfiddle.net/xwesf1Lt/。告诉我，如果我错了。请注意，我将diff变量更改为左侧位置。

另外，我们不改变边距，而是改变左边的属性。

var firstLI = $('ul:first-child')[0];
firstLI.style.marginLeft = 0;

$('li').draggable({
    axis: 'x',
    drag: function(e, ui) {
        var diff = ui.position.left;
        console.log(diff);
        var currentLeft = parseInt(firstLI.style.marginLeft, 10);
        var offset = currentLeft + diff + 'px';
        //firstLI.style.marginLeft = diff;
        //  to drag all of them:

        $("li").each(function(index) {
            $(this).css("left", offset);
        });

        // with this enabled, can only be moved 1px at a time..?
        // e.preventDefault();
    }
});

Answer 3

这不会起作用吗？将保证金添加到ul？似乎在小提琴中工作！

var ul = $('ul');

ul.draggable({
    axis: 'x',
    drag: function(e, ui) {
        ul.css({marginLeft: ui.position - ui.originalPosition});
    }
});

Answer 4

如果您希望用户能够自由拖动导航栏，然后放在同一个地方，那么您可以尝试使用jquery dad插件。它是迄今为止我用过的最好的拖放插件，用于简化代码。

Click here如果您愿意，可以查看其演示和文档。

传递/更改jQuery UI拖动事件

4 个答案: