根据此处的其他主题,我更新了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);
    }
   });

我想做的是在什么时候换出内容
我们在容器之间拖动。对于我的一生我无法
使它正常工作。希望您能提供帮助。

当您转到小提琴代码时,您会看到
可以从列表中拖放到容器上
然后您可以在容器之间拖放

我要在这里做的是如果有最新内容
在您放入的容器中将交换
它与您几乎放入的内容
就像一个可排序的作品。但我不知道
如何将可排序对象附加到我拥有的结构上

最佳答案

我已将JSFiddle fork 并更新为工作版本。

变化:

  • .drop-container跨度
  • 添加了ID
  • :drop回调:由于已删除的元素不再在accept: "#mykeys ul li",中,因此accept: "#mykeys ul li, .drop-container li",更改为#mykeys
  • :drop回调:添加了source_elementexisting_element,因此我们可以获取源和目标并交换.tree列表中的项目
  • 关于javascript - jQuery交换元素内容给出了Type F错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19060581/

    10-14 19:25
    查看更多