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>

<小时/>

鼠标按下功能保存拖动项目的ID

也许值得一提的是，您不应该在变量 Dragged_course_id 之前使用单词“var”来初始化它，因为如果您这样做，该变量将成为本地变量，并且在拖放事件函数结束时将不可用。拖动过程。

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 上时，它的拖放事件将触发，但是当该元素被拖放到列表本身上时，两个拖放事件都会触发，从而添加拖动的项目两次。为此，我想出了这个厚脸皮(不是特别漂亮)的想法:我删除了目标可排序的接收事件中的最后一个元素!

<小时/>

目标可排序配置##

$( "#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