Question

我正在制作一个简单的网络应用。在一个部分，我必须拖动两个不同的列表 - 其中一个可能是空的。我无法进入空列表。

我试过了：

dropOnEmpty = true
dropOnEmpty = "true"
dropOnEmpty = false
dropOnEmpty = "false"

并尝试了以下内容：

How do I move an item to an empty list using jquery?

JQuery API

Rollys Wordpress

jQuery UI drop on empty container/list not working

隐藏<li>元素，以便列表根本不为空。

但没有任何效果。

这是HTML部分：

<ul><li>Present</li></ul>
<ul id="present" class="sortable"></ul>   //First List
<ul><li>Future</li></ul>
<ul id="future" class="sortable"><li></li></ul>  //Second List

这是jQuery函数：

$("ul.sortable").sortable({
axis: 'y',
        cancel: "div.cal",
        connectWith: "ul",
        dropOnEmpty: true,
        update: function(event, ui) {
            if (ui.sender === null) {
                var goalsNames = '';
                $(".sortable li").each(function() {
                    if (goalsNames === '') {
                        goalsNames = '["' + $(this).text();
                    } else {
                        goalsNames += '","' + $(this).text();
                    }
                });
                goalsNames += '"]';
                localStorage.setItem("goalsNames", goalsNames);
                var goalsDetails = localStorage.getItem("goalsDetails");
                console.log(goalsDetails);
                var goalsDetailsObj = JSON.parse(goalsDetails);
                $("#present li").each(function() {
                    console.log(JSON.stringify(goalsDetailsObj[$(this).text()]));
                    console.log(goalsDetailsObj[$(this).text()].active);
                    goalsDetailsObj[$(this).text()].active = "present";
                });
                $("#future li").each(function() {
                    goalsDetailsObj[$(this).text()].active = "future";
                });
                localStorage.setItem("goalsDetails", JSON.stringify(goalsDetailsObj));
            }
        }
}).disableSelection();
});

Answer 1

据我所知，sortable是一个JQuery-UI功能，可以通过拖放操作对在一个列表中的项目进行排序。

来自docs

启用一组DOM元素可排序。单击并将元素拖动到列表中的新位置

我会尝试使用draggable和droppable，您需要通过droppable初始化放置目标。

<ul><li>Present</li></ul>
<ul id="present" class="firstList"></ul>   <!--First List-->
<ul><li>Future</li></ul>
<ul id="future" class="secondList"><li></li></ul>  <!--Second List-->

$('ul.firstList').draggable(/***/);
$('ul.secondList').droppable(/***/);

了解要在/***/插入的许多选项。

更新
我为你创造了一个起点：http://plnkr.co/RPlTgK

Answer 2

这是在空列表中拖放的正确示例希望这将有助于Demo

无法放在空列表中

2 个答案: