jQuery sortable (johnny) bootstrap 3 导航栏问题

Question

我在引导程序 3 中可排序的引导程序导航遇到问题。

$(".nav").sortable({
    group: 'nav',
    nested: false,
    vertical: false,
    exclude: '.divider-vertical',
    onDragStart: function($item, container, _super) {
        $item.find('.dropdown-menu').sortable('disable');
        _super($item, container);
    },
    onDrop: function($item, container, _super) {
        $item.find('.dropdown-menu').sortable('enable');
        _super($item, container);
    }
});

$(".dropdown-menu").sortable({
    group: 'nav'
});

这里有一个小提琴来告诉你我的意思。

https://jsfiddle.net/xpv1t4gq/1/

当您尝试拖动链接时（您可以通过接触最好地看到它），它与光标无关。

过去几天我一直在玩它，但我无法让它工作......

谁能帮我解决这个问题？

Answer 1

几个小时前我遇到了同样的问题，并且成功了！ 希望对您有所帮助。

首先你需要在 jquery-sortable.js 中编辑 2 个函数：

onDrag: function ($item, position, _super, event) {
        x = $("#VerticalSort").val();
        if (x == 0) {
            $("#VerticalSort").val(position.left);
            position.left = 0;
        }
        else {
            position.left = position.left - x;
        }
        position.top = 0;
      $item.css(position)
    },

 onDrop: function ($item, container, _super, event) {
        $("#VerticalSort").val("0");
      $item.removeClass(container.group.options.draggedClass).removeAttr("style")
      $("body").removeClass(container.group.options.bodyClass)
    },

我在我的视图中使用了一个隐藏的输入来测试解决方案，但想法是保留第一次点击值以供稍后减去，并在放置操作中重置为 0。

<input id="VerticalSort" type="hidden" value="0" >

问题是在某些时候 JS 将 x/y 的第一次点击值加倍（在 js 代码中命名为“left”和“top”）

希望它对你有用。

问候！

Answer 2

我遇到了同样的问题，您需要包含参数：delay > 0。例如：

$(".nav").sortable({
    group: 'nav',
    nested: false,
    vertical: false,
    exclude: '.divider-vertical',
    delay: 5,
    onDragStart: function($item, container, _super) {
        $item.find('.dropdown-menu').sortable('disable');
        _super($item, container);
    },
    onDrop: function($item, container, _super) {
        $item.find('.dropdown-menu').sortable('enable');
        _super($item, container);
    }
});