JQuery UI:绝对DIV可拖动的可排序元素

时间:2013-02-28 00:23:38

标签: jquery jquery-ui jquery-ui-sortable

我有代码:

<div class="content">
    <div id="sortable">
        <div class="guide">Element 1</div>
        <div class="guide">Element 2</div>
    </div>
</div>


<div class="overlay" style="position: absolute; display:block;">
</div>

我有脚本:

$('#sortable').sortable({
    revert: true
});

$( ".guide" ).live({
    mouseover: function(event)
    {
        event.preventDefault();

        var item = $(this);

        var width = item.outerWidth();
        var height = item.outerHeight();

        var posTop = item.position().top + ((item.outerHeight(true) - item.outerHeight()) / 2);
        var posLeft = item.position().left + ((item.outerWidth(true) - item.outerWidth()) / 2);


        $('.overlay').css({left: posLeft, top: posTop, width: width, height: height});
    }
});

也就是说,我有一个可排序的DIV,但是一个绝对的DIV会用鼠标悬停事件覆盖你的项目。但我不能再对基本元素进行排序。

由于技术原因,我需要在DIV元素上使用它。我在jsFiddle上做了一个例子:

http://jsfiddle.net/roneioliveira/NPdnv/4/

0 个答案:

没有答案