我有一个 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 超出屏幕,滚动到底部,然后尝试将其向上拖动。
如何让体验变得更轻松、更可靠?
最佳答案
您可以使用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");
}
});
});
关于jquery-ui - 使用 JQueryUI Sortable 时如何可靠地隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18751519/