Javascript JQuery UI.sortable,如何动态更改帮助器偏移量?
我有一个项目清单,每个项目都有很重的内容。当我应用jQuery sortable时,我想要实现的是,当一个项目被拖走并开始排序时,所有项目内容都将自动隐藏 从我所有的测试来看,jQuery不能很好地适应这样的变化,例如,如果我执行以下操作Javascript JQuery UI.sortable,如何动态更改帮助器偏移量?,javascript,jquery,Javascript,Jquery,我有一个项目清单,每个项目都有很重的内容。当我应用jQuery sortable时,我想要实现的是,当一个项目被拖走并开始排序时,所有项目内容都将自动隐藏 从我所有的测试来看,jQuery不能很好地适应这样的变化,例如,如果我执行以下操作 $("#sortable").sortable({ start: function(event, ui) { $(".hidden").addClass("hide"); } }); jQuery无法自动计算出隐藏
$("#sortable").sortable({
start: function(event, ui) {
$(".hidden").addClass("hide");
}
});
jQuery无法自动计算出隐藏项的大小,排序将变得一团糟
所以我用一个间接的方法解决了这个问题,我首先检查mousedown、mouseup和mousemove事件,一旦检测到拖动(比如mousedown/mousemove超过50ms),我会立即隐藏这些项目
在jQuery中,我使用了一些延迟来开始排序
var mouse_down = false;
var mouse_down_time;
var content_hidden;
$(".drag-handle").bind("mousedown", function(e) {
mouse_down = true;
mouse_down_time = e.timeStamp;
$(".drag-handle").bind("mousemove", function(e) {
if (mouse_down && !content_hidden) {
if (e.timeStamp - mouse_down_time > 10) {
$(".hidden").addClass("hide");
content_hidden = true;
}
}
});
}).bind("mouseup", function(e){
$(".drag-handle").unbind("mousemove");
mouse_down = false;
if (content_hidden) {
$(".hidden").removeClass("hide");
content_hidden = false;
}
});
$("#sortable").sortable({
delay:100,
stop: function(event, ui) {
if (content_hidden) {
$(".hidden").removeClass("hide");
$(".drag-handle").unbind("mousemove");
content_hidden = false;
}
}
});
因此,jQuery将在隐藏项内容后开始排序
除了辅助偏移外,其他一切都正常工作。辅助对象偏移量似乎正好与被拖动项上方的所有项内容(现在在拖动过程中隐藏)所占用的空间量相等
所以我的问题是,
是否有一种方法可以动态计算隐藏前后的所有项目高度,并相应地设置辅助对象偏移
谢谢。问题解决了
我所做的是动态计算拖动项上方的所有项高度(隐藏内容之前和之后),然后通过设置css:({'top-margin':offset_value+'px')将helper offset设置为相应的值