基于条件的jquery droppable [英] jquery droppable based on condition

问题描述

以下是我的代码。

$(document).ready(function(){
    $("#container li").draggable({ revert: 'invalid' });
    var total = 0;
    $("#selected ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
        },
        accept: function() {
            return $("#selected li").length < 5;
        },
        placeholder: true
    });
    $("#container ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
        },
        placeholder: true
    });
});

我们可以将LI元素从容器div拖放到选定的div，反之亦然。一切正常，但拖放的LI元素没有被排序。我的意思是，如果我将LI元素从容器中删除到选中，它总是移动到LI列表的末尾。当我从选择元素div中删除元素时也会发生同样的情况。

It is something like we can drag and drop LI elements from container div to selected div and vice versa. Everything is working, but LI elements that are dragged and dropped are not being sorted. I mean, if I drop an LI element from container to selected, it is always moved to at the end of LI list. Same happens when I drop element from selected to container div.

那么我应该怎么做才能使LI排序？

So what should I do to make LI sortable?

这是链接： http://www.jsfiddle.net/nick_craver/HemSU/1/

请解决此问题需要帮助。
谢谢。

Please need help to resolve this out. Thanks.

推荐答案

对于你所追求的（与原始问题非常不同）， .sortable（） 会更合适，如下所示：

For what you're after (very different from the original question), .sortable() would be more appropriate, like this:

$(document).ready(function(){
    function checkMax() {
        var max = $("#selected li").length >= 5;
        $("#container ul").sortable("option", { 
            revert: max, connectWith: max ? '' : '#selected ul'
        });
    }
    $("#selected ul").sortable({
        connectWith: '#container ul',
        receive: checkMax
    }).disableSelection();
    $("#container ul").sortable({
        connectWith: '#selected ul',
        receive: checkMax
    }).disableSelection();
});

你可以在这里测试一下。

这篇关于基于条件的jquery droppable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！