JQuery UI.sortable,如何动态更改辅助偏移量?

时间:2011-09-05 05:31:47

标签: javascript jquery

我有一个项目列表,每个项目都含有大量内容。当我应用jQuery sortable时,我想要实现的是,当一个项目被拖走并开始排序时,所有项目内容都将自动隐藏。

从我的所有测试中,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将在隐藏项目内容后开始排序。

除辅助偏移外,一切正常。辅助偏移量似乎突然增加了拖动项目上方所有项目内容占用的空间量(拖动时现在隐藏了这些空间)。

所以我的问题是,

有没有办法动态计算隐藏前后的所有项目高度,并相应地设置辅助偏移量?

感谢。

1 个答案:

答案 0 :(得分:1)

嗯,问题解决了。

我所做的是动态计算拖动项目之上的所有项目高度(隐藏内容之前和之后),然后通过设置css将辅助偏移设置为相应的值:({'top-margin':offset_value +'px “})