使用 JQueryUI Sortable 时如何可靠地隐藏元素？答案

【问题标题】：How to reliably hide elements when using JQueryUI Sortable?使用 JQueryUI Sortable 时如何可靠地隐藏元素？
【发布时间】：2013-09-11 21:23:33
【问题描述】：

我有一个包含大量内容（标题和文本区域）的 DIV 集合。我希望它们可以使用 JQueryUI 的 sortable() 系统进行拖动/排序。但是每个 DIV 里面的内容太多了，我想在用户开始拖动时隐藏不需要的内容，并在他们停止时恢复内容。

它仅在拖动列表顶部附近的项目时好的起作用。但是，当内容多于屏幕上的内容时，将较低的元素拖到列表上会很不稳定，这绝对是一种糟糕的用户体验。

到目前为止我的代码：

$(document).ready(function () {
    $('.handle').mousedown(function() { $('.stuff-to-hide').hide(); });

    $("#SortParent").sortable({
        handle: '.handle',
        items: '.sort-child',       
        start: function(event, ui) {    
            $('.stuff-to-hide').hide();
            $('.sort-child').addClass('diff-height');
        },
        helper: function() { return '<p>MY DRAGGING BAR</p>'; },
        forceHelperHeight: true,
        stop: function() {
            $('.stuff-to-hide').show();
            $('.sort-child').removeClass('diff-height');
        }
    });
});

我有一个 JSFiddle http://jsfiddle.net/FzUZg/8/ 来演示这个问题。使您的窗口足够小，以使某些 DIV 不在屏幕上，滚动到底部，然后尝试将其向上拖动。

如何让体验更轻松、更可靠？

【问题讨论】：

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

您可以使用cursorAt 选项，它似乎有很大帮助。

Working Example

$(document).ready(function () {
    $('.handle').mousedown(function() { $('.stuff-to-hide').hide(); });

    $("#SortParent").sortable({
        cursorAt: {top:25, left:15},  //Important bit
        handle: '.handle',
        items: '.sort-child', 
        start: function(event, ui) {    
            $('.stuff-to-hide').hide();
            $('.sort-child').addClass('diff-height');
        },
        helper: function() { return '<p>MY DRAGGING BAR</p>'; },
        forceHelperHeight: true,
        stop: function() {
            $('.stuff-to-hide').show();
            $('.sort-child').removeClass('diff-height');
        }
    });
});

或者您可以考虑使用某种可排序的手风琴，如下所示：

Working Example

 $(function () {
     $("#accordion")
         .accordion({
         active: true,
         header: "> div > h3",
         collapsible: true
     })
         .sortable({
         forceHelperSize: true,
         cursorAt: {
             top: 5
         },
         tolerance: 'pointer',
         axis: "y",
         handle: "h3",
         placeholder: "place",
         start: function () {
             var active = $("#accordion").accordion("option", "active");
             $("#accordion").accordion("option", "active", false);
         },
         stop: function (event, ui) {
             // IE doesn't register the blur when sorting
             // so trigger focusout handlers to remove .ui-state-focus
             ui.item.children("h3").triggerHandler("focusout");
         }
     });
 });

【讨论】：