3

基于我在这里的另一个线程，我更新了 JS Fiddle代码

     $(".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);               
    }
   });

我想要做的是当我们在容器之间拖动时交换内容。对于我的生活，我无法让它正常工作。希望你能提供帮助。

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

我在这里要做的是，如果您放入的容器中有当前内容，它将与您放入的内容交换出来，几乎就像可排序的工作一样。但我不知道如何将可排序附加到我拥有的结构

4

1 回答 1

0

我已将您的JSFiddle分叉并更新为工作版本。

变化：

  • .drop-container向span添加了 ID
  • :drop回调：更改accept: "#mykeys ul li",为，accept: "#mykeys ul li, .drop-container li",因为删除的元素#mykeys不再存在
  • :drop回调：添加了source_element&existing_element所以我们可以获取源和目标并交换.tree列表中的项目
于 2013-09-28T04:21:46.013 回答