jQuery可排序

我想有一个可排序的列表，但我也希望该列表中的元素可以拖放到我定义为droppable的div。我似乎没有找到办法。有任何想法吗？

解决方法

这里是Colin的解决方案的简化版本。

最大的区别是，此解决方案不存储可排序元素的整个HTML，而只存储当前拖动的项。如果物品掉在可放置区域上，则将其插入其原始位置。

无论如何，这里的代码：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var dropped = false;
    var draggable_sibling;

    $("#sortable").sortable({
        start: function(event,ui) {
            draggable_sibling = $(ui.item).prev();
        },stop: function(event,ui) {
            if (dropped) {
                if (draggable_sibling.length == 0)
                    $('#sortable').prepend(ui.item);

                draggable_sibling.after(ui.item);
                dropped = false;
            }
        }
    });

    $(".droppable").droppable({
        activeClass: 'active',hoverClass:'hovered',drop:function(event,ui){
            dropped = true;
            $(event.target).addClass('dropped');
        }
    });
});

</script>

<style type="text/css">
#sortable li{
    clear:both;
    float:left;
}

.droppable {
    clear:both;
    height:300px;
    width:400px;
    background-color:#CCC;
}

.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>

</head>
<body>

<ul id="sortable">
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
    <li id="four">Four</li>
    <li id="five">Five</li>
    <li id="six">Six</li>
</ul>

<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>

</body>
</html>

如果项目被拖动到列表中的新位置并且然后被放置在< ul>之外，它仍然遇到与Colin的解决方案相同的问题。和可投放的< div&gt ;.该项目不会重置，但会采取列表中的最后一个位置(在Google Chrome中测试)。无论如何，这是很容易解决与一些鼠标超过检测或甚至可能是理想的行为。

jQuery可排序

解决方法

相关文章