Question

我有一系列DIV，里面有很多内容（标题和文字）。我希望它们可以使用JQueryUI的sortable（）系统进行可拖动/排序。但是每个DIV中都有很多内容，我希望在用户开始拖动时隐藏不需要的内容，并在内容停止时恢复内容。

在拖动列表顶部附近的项目时，它只能 okay 。但是当内容比屏幕上的内容更多时，将下面的元素拖到列表中是不稳定的，并且肯定是糟糕的用户体验。

到目前为止我的代码：

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

或者您可以考虑使用某种类似的可分类手风琴：

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

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

1 个答案: