Question

我有以下小提琴和相应的代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
#sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
</style>
<script>
//    debugger;
var sortableIn = 0;
$(function() {
    $(".draggable").draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid"
    });
    $(".sortable").sortable({
        revert: true,
        receive: function(event, ui) {
            var $this = $(this);
            if ($this.children('li').length > 2) {
                alert("stopping");
               $(ui.sender).sortable('cancel');
            }
        }
    });
    $("ul, li").disableSelection();
});
</script>
<body>
<ul id="sortable1">
    <li class="ui-state-default sortable">Item 1</li>
    <li class="ui-state-default sortable">Item 2</li>
    <li class="ui-state-default sortable">Item 3</li>
    <li class="ui-state-default sortable">Item 4</li>
    <li class="ui-state-default sortable">Item 5</li>
</ul>
<ul id="sortable3">
    <li class="ui-state-highlight draggable">Item 3</li>
</ul>
</body>

jsfiddle of example

我的问题是，如果丢弃的项目的数量大于2，我想停止添加到sortable。有没有办法做到这一点？

关于问题的后续问题是，我怎样才能从可排序的，拖出，从可排序项中删除项目？

提前致谢！

Answer 1

使用$this.sortable('disable');代替$(ui.sender).sortable('cancel');。

Answer 2

我找到了自己的解决方案。

请参阅以下小提琴：

Fiddle to solution

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
#sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
</style>
<script>
debugger;
var sortableIn = 0;
$(document).ready(function() {

    var removeIntent = false;

    $(".draggable").draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
        revertDuration: 20
    });
    $(".sortable").sortable({
        revert: true,
        revertDuration: 20,
        receive: function(event, ui) {
            var $this = $(this);
            if ($this.children('li').length > 2) {
                $(this).children('li').filter(function() {
                    return $(this).text() == ui.item.text();
                }).first().remove();
            }
        },
        over: function() {
            removeIntent = false;
        },
        out: function() {
            removeIntent = true;
        },
        beforeStop: function(event, ui) {
            if (removeIntent == true) {
                ui.item.remove();
            }
            ui.item.addClass(" dropped ");
        }
    });
    $("ul, li").disableSelection();
});
</script>
<body>
<ul id="sortable1">
    <li class="ui-state-default sortable">Item 1</li>
    <li class="ui-state-default sortable">Item 2</li>
    <li class="ui-state-default sortable">Item 3</li>
    <li class="ui-state-default sortable">Item 4</li>
    <li class="ui-state-default sortable">Item 5</li>
</ul>
<ul id="sortable3">
    <li class="ui-state-highlight draggable">Dog</li>
    <li class="ui-state-highlight draggable">Cat</li>
    <li class="ui-state-highlight draggable">Bear</li>
    <li class="ui-state-highlight draggable">Lion</li>
</ul>
</body>

</html>

如果超过计数，则停止可拖动进入可排序

2 个答案: