4

我有一个包含大量内容（标题和文本区域）的 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 不在屏幕上，滚动到底部，然后尝试将其向上拖动。

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

4

1 回答 1

3

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

工作示例

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

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

工作示例

 $(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");
         }
     });
 });
于 2013-10-08T18:33:34.090 回答