jQuery可排序和可丢弃

Question

jQuery可排序和可丢弃

Col*_*lin 27 jquery jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

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

Answer 1

Rei*_*und 22

这是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>

Run Code Online (Sandbox Code Playgroud)

如果一个项目被拖入列表中的新位置然后掉落<ul>到droppable 外面,它仍然会遇到与Colin解决方案相同的问题<div>.然后该项目不会重置,但会占据列表中的最后一个位置(在Google Chrome中测试).无论如何,这可以通过一些鼠标过度检测轻松解决,或者甚至可能是理想的行为.

归档时间：	15 年，9 月前
查看次数：	35619 次
最近记录：	8 年，2 月前