jquery-ui - 使用 JQueryUI Sortable 时如何可靠地隐藏元素？

Question

我有一个 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 超出屏幕，滚动到底部，然后尝试将其向上拖动。

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

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

或者您可以考虑使用某种可排序的 Accordion ，如下所示:

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