如果超出计数，则阻止可拖拽对象拖放到可排序对象中

Stopping draggable from dropping into a sortable if a count is exceeded

本文关键字：对象 排序 拖放 如果      更新时间：2023-09-26

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

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

我的问题是，如果放入可排序项的计数大于2，我想停止添加到可排序项。有什么办法可以做到吗?

接下来的问题是，我如何从可排序列表中拖出，从可排序列表中删除项目?

提前感谢!

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

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

请参见以下内容:

拨弦解

<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>
相关文章：