javascript - jQuery 交换元素内容给出类型 F 错误

Question

根据我在这里的其他主题，我更新了 JS Fiddle Code

     $(".drop-container").droppable({
    activeClass: "ui-state-highlight",
    //accept: "#mykeys ul li",
    accept:"#mykeys ul li, .drop-container li",
    //connectWith: ".drop-container",
    drop: function( event, ui ) {
         var cid=ui.draggable.attr("id");
         var from_id=ui.draggable.parent().attr('id');       
         if(typeof from_id != 'undefined'){

            var editor = $('#'+cid);  //put your ids here
            var viewer = $('#'+from_id);

            editorContent = editor.clone();
            viewerContent = viewer.clone();

            editor.replaceWith(viewerContent);
            viewer.replaceWith(editorContent);

         }
         $(this).empty();
         //append the draggable onto this
        $(ui.draggable).appendTo(this);
    },
    out: function( event, ui ) {
        var oid=$(ui.draggable).attr("id");
        console.log('dragged out '+oid);
        var from= $(this).closest(".drop-container").attr("id");
        //console.log('from '+ from);               
    }
   });

我想做的是在我们在容器之间拖动。为了我的生活，我不能让它正常工作。希望您能提供帮助。

当你转到 fiddle 代码时，你会看到你可以从列表中拖放到容器上然后你可以在容器之间拖放

我想在这里做的是如果有当前内容在你放入的容器中它会交换几乎与您要删除的内容一起使用就像可排序的一样。但我想不通如何将 sortable 附加到我的结构

Answer 1

我已经 fork 并更新了你的 JSFiddle到工作版本。

变化:

• 将 ID 添加到 .drop-container 跨度
• :drop 回调:将 accept: "#mykeys ul li", 更改为 accept: "#mykeys ul li, .drop-container li", 因为丢弃的元素不再在 #mykeys 中
• :drop 回调:添加了 source_element 和 existing_element 以便我们可以获取源和目标并交换 .tree 中的元素 列表