jQuery 可排序（约翰尼）bootstrap 3 导航栏问题

Question

我在 bootstrap 3 中的 bootstrap 导航排序有问题。

$(".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'
});

这里 fiddle 只是为了告诉你我的意思。

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

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

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

谁能帮我解决这个问题？

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

jQuery 可排序（约翰尼）bootstrap 3 导航栏问题

jQuery sortable (johnny) bootstrap 3 navbar issue

jquery

jquery-ui-sortable

twitter-bootstrap