Question

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

我需要包含可排序ul的整个div作为丢弃区域。

Answer 1

我花了一段时间但我自己想出来......也许我可以拯救别人的痛苦，所以这里...... [/ p>

只需将div转换为可拖动和放置事件功能，即可将拖动的项目添加到目标列表的子项中。
这并不容易，因为拖动物理拖动元素（对象）不能以编程方式使用其所有属性。你似乎只是在属性中得到文本而不是id 我的想法是在拖动开始时保存元素的id在鼠标按下事件上。然后我创建了完整的列表项，从拖动的项目文本中提供文本，并为其提供我之前保存的ID。在进程开始时的鼠标按下事件中。

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

当鼠标首次关闭可拖动元素时（即拖动事件开始时），我捕获了元素的id，因为我需要元素的id才能将它添加到后端运行的数据库中。 / p>

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

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

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

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

Droppable 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事件都会触发，将拖动的项目添加两次。为此我想出了这个厚脸皮（不是特别漂亮）的想法：我删除了目标可排序的接收事件中的最后一个元素！

目标可排序配置##

$( "#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') 您可能需要删除现有项目上的现有可排序项。

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

2 个答案:

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

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

Droppable Div配置

目标可排序配置##