jquery：如何将可排序的放置区域扩展到整个 div

Question

我正在寻找能够放入 div 的方法，并且丢弃的项目会自动进入并加入可排序的“ul”。整个 div 中只有一个启用 drop 的 ul。
我在 jQuery 中使用可排序。

我需要将包含可排序 ul 的整个 div 作为放置区域。

---

flexi comment box

Answer 1

我花了一段时间，但我自己想通了...也许我可以减轻别人的痛苦，所以就这样吧...

只需将 div 转换为可拖动的，并在放置事件函数中将拖动的项目添加到目标列表的子项中。
这并不容易，因为在拖动物理拖动元素（对象）时，它的所有属性都不能以编程方式使用。您似乎只是获得了属性中的文本，甚至没有获得 id。
我的想法是在拖动开始时在鼠标按下事件中保存元素的 id。然后我创建了完整的列表项，给出了拖动项文本中的文本，并给出了我之前保存的 id。在进程开始时的鼠标按下事件中。

---

在可拖动元素（在我的例子中是列表项）上设置鼠标按下事件##

当鼠标第一次按下可拖动元素时（即拖动事件开始时），我会捕获元素的 id，因为我需要元素的 id 才能将其添加到后端运行的数据库中。

<li align="left" onmousedown="mouseDown(this)" id="1832" class="ui-state-default">Advanced Econometrics II | E 805</li>

---

Mouse Down 函数保存被拖动项的 id

也许重要的是要提一下，您不应该在变量 dragged_course_id 之前使用单词 'var' 来初始化它，因为如果这样做，该变量将成为本地变量，并且在结尾的 drop 事件函数中不可用拖动过程。

function mouseDown(item)
{
    dragged_course_id = item.id;
//  alert (dragged_course_id);
    }

---

可放置的 div 配置

 $(function() {
        $( "#droppable" ).droppable({
            activeClass: "greedy",
            hoverClass: "over_state",
            drop: function( event, ui )
             {
                $( this ).removeClass("over_state");
                target_stack = document.getElementById('sortable2');
                var already_selected_courses = target_stack.childNodes;
                ignore=false;
                for (i=0;i<already_selected_courses.length; i++)
                {
                    if (dragged_course_id == already_selected_courses[i].id) ignore=true;
                }
                if (!ignore) $( "<li align='left' class='ui-state-default' id= "+dragged_course_id+"></li>" ).text( ui.draggable.text() ).appendTo( target_stack);

                available_stack = document.getElementById('sortable1').childNodes;

                for (i=0; i<available_stack.length;i++)
                    if (available_stack[i].id == dragged_course_id) available_stack[i].parentNode.removeChild(available_stack[i]);


            },




                    out: function(event, ui)
                     {
                          $(this)
                    .removeClass('over_state')
                    .removeClass('greedy')
                     }  


        });
    });

事实证明这很好，但随后出现了列表本身可删除的问题。当一个项目被拖放到 div 上时，它会触发 drop 事件，但是当元素被拖放到列表本身时，两个 drop 事件都会触发，将拖动的项目添加两次。为此，我提出了这个厚颜无耻（不是特别漂亮）的想法：我删除了 target sortable 的接收事件中的最后一个元素！

---

目标可排序配置##

$( "#sortable2" ).sortable({
            greedy: 'true',
            connectWith: ".connectedSortable",
            cancel: ".ui-state-disabled",
            items: "li:not(.ui-state-active)",  
            receive: function(event,ui)
            {
                 target_stack = document.getElementById('sortable2');
                 target_stack.removeChild(target_stack.lastChild);
            },
            dropOnEmpty: false
        });

---

Flexi Comment Box

Answer 2

您只需在插入新项目后重新运行sortable('.myclass')。
您可能需要删除现有项目上的现有排序。