jquery-ui - Jquery UI 可排序 - 仅在放置事件上排序

标签 jquery-ui

我想在拖动项目时禁用项目排序。只有在完成转换后,项目才必须进行相应的排序。

     $( "#sortable" ).sortable({

        tolerance: 'pointer',
        revert: 'invalid',
        forceHelperSize: true,
        scroll: true,
        forcePlaceholderSize: true,
        placeholder: 'ui-state-highlight',
        helper: 'clone',
        containment: 'parent',
        cursor: 'move',        
        distance: 5,
        opacity: 0.3,
    });

link:jsfiddle

最佳答案

一种方法是在不同事件期间对占位符位置进行微观管理。它会导致恢复问题,但可能有一种方法可以以某种方式解决这个问题。行为可能不完全相同,但再一次,稍微调整一下,它就可能存在。无论如何,我的建议是:

$(function () {
    $("#sortable").sortable({

        tolerance: 'pointer',
        //revert: 'invalid',
        forceHelperSize: true,
        scroll: true,
        forcePlaceholderSize: true,
        placeholder: 'ui-state-highlight',
        helper: 'clone',
        containment: 'window',
        cursor: 'move',
        distance: 5,
        opacity: 1,
        start: function (event, ui) {
            place_prev = ui.placeholder.prev();//get position when selecting item
        },
        change: function (event, ui) {
            place_pos = ui.placeholder.index(); //each change you gather where the placeholder is going
            place_prev.after(ui.placeholder);//then you place it back where it started
        },
        beforeStop: function (event, ui) {

            $('li').eq(place_pos).after(ui.item);//before stopping you place item where it was on last change event
        },

    });

});

http://jsfiddle.net/2mxw14vv/3/

关于jquery-ui - Jquery UI 可排序 - 仅在放置事件上排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30322532/

相关文章:

javascript - 使用 jQuery 对话框 .append 更改每行的颜色

jquery - 使用 Jquery UI 拖动和更新列表并提取行项目 ID 进行更新

jquery - 是否可以禁用 jQuery 的移动响应式设计?

javascript - 如何使用鼠标单击选择多个元素?

javascript - 难道没有标准的 jQuery 弹出菜单组件吗?

jquery - 在开始之前取消拖动

jQuery UI,如何预选选项卡

javascript - jQuery 搜索过滤器显示列表项标题

javascript - JQuery UI 对话框显示,不作为对话框工作

jQuery UI MultiSelect Widget 选择保留在 IE 中,但不保留在 Chrome 中