jQuery可排序和可丢弃

时间：2010-01-19 00:04:54

标签： jquery jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

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

6 个答案:

答案 0 :(得分：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>

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

答案 1 :(得分：4)

据我所知，我发布的前一个代码的问题是droppable的drop函数在sortable的mouseup之前被调用，并且因为我重新编写了列表，所以sortable生气了（因为缺乏更好的条款）。这有点猜测。

查看最终代码：

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

var dropped = false;
var templateHtml;
$(document).ready(function(){

    setSortable();

    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            dropped = true;
            //alert(ui.draggable.text());
        }
    });

});

function setSortable(){
    $("#sortable").sortable({
        stop:function(event,ui){
            if(dropped){
                $("#sortable").sortable('destroy').html(templateHtml);
                dropped = false;
                setSortable();
            }
        }
    });

    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
}

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

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </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 id="droppable">
Drop Here
</div>

</body>

这里涉及很多怪癖。

我试图将#sortable html保存在sortable的start事件上，但是在所有ui-css被应用之后调用了它，并最终将列表元素放在疯狂的地方。所以，我需要在LIs上使用mousedown函数。

setSortable在一个函数中，因为stop事件重写了sortable，我想这是“递归的”。不确定这里的确切术语，但我们可以令人烦恼地混淆。

幸运的是，在sortables stop函数之前调用了droppable的drop函数，所以我能够设置一个全局的“drop”变量，用于查看该元素是否被删除。

我仍然感到惊讶，这并不容易，我认为jQuery会有更好的处理功能。也许我错过了什么？

答案 2 :(得分：1)

不完全是你要求的，但我需要一个初始容器，可以将项目拖到另一个可排序的容器中 - 并且我认为我应该共享它。这就是我实现它的方式（jQuery 1.8.3）：

$("#sortable-list").sortable();
$("#initial-list div").draggable({
  revert: true,
  revertDuration: 0
});

$("#initial-list").droppable({
  accept: ".item-selected",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    var itemInOtherList = $(this).children("#" + dropped.attr('id'));
    itemInOtherList.removeClass('ui-state-disabled').draggable({ disabled: false });
    dropped.remove();
  }
});
$("#sortable-list").droppable({
  accept: ".item-initial",
  drop: function(e, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    droppedOn.append(dropped.clone()
      .removeAttr('style')
      .removeClass("item-initial")
      .addClass("item-selected"));
    dropped.animate(dropped.data().origPosition, {
      complete: function() {
        $(this).addClass('ui-state-disabled').draggable({ disabled: true });
      }
    });
  }
});

JSFiddle：http://jsfiddle.net/Muskar/dwz4mvxa/8/

答案 3 :(得分：0)

我花了一整天的时间，而且我已经接近了很多，但仍然没有像我想的那样好。我现在拥有我需要的功能，但是Javascript错误正在被抛出。

问题是如果元素在droppable中而不是在列表中被删除，则可排序列表返回到其先前的位置。目前，我正在保存html onmousedown，然后在droppable的drop函数中重写html。这工作，但它给我一个jquery变量是null错误。有人能找到更好的解决方案吗？

代码：

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

var templateHtml;
$(document).ready(function(){

    $("#sortable").sortable();
    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            $("#sortable").sortable('destroy').html(templateHtml);
            $("#sortable").sortable();
            $("#sortable li").addClass("drop").bind('mousedown',function(){
                templateHtml = $("#sortable").html();
            });          
        }
    });

});

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

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </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 id="droppable">
Drop Here
</div>

</body>

答案 4 :(得分：0)

通过使每个目标DIV成为他们自己的可排序，能够获得类似的最终结果。

然后，通过connectWith，使所有可排序的数据库能够连接并共享可拖动的内容。

类似的东西：

var connects = '#main_sortable, div.target';
$('#main_sortable').sortable({ connectWith: connect });
$('div').sortable({ connectWith: connect} );

答案 5 :(得分：0)

如果您可以允许其他可放置区域进行排序，则可以将connectWith option与公共选择器一起使用：

<div id="droppable1" class="droppable-area"></div>
<div id="droppable2" class="droppable-area"></div>
<div id="droppable3" class="droppable-area"></div>

您的jQuery代码将是：

$('.droppable-area').sortable({ connectWith: '.droppable-area' });

无论如何，这个解决方案对我来说很有效。

相关问题
最新问题