使用 jquery ui 的嵌套拖放无法正常工作

Question

我使用 jquery ui 开发了嵌套拖放，但它不允许我拖放到
.drop-container div 之外。这是要审查的 jsfiddle：

FIDDLE

一旦我将项目拖放到#list2 div 中，它就不起作用了。我该如何解决？

代码如下：

JS：

$(function() {
  $("#list2 .drop-container").sortable({
    connectWith: "#list1",
    over: function() {
      removeIntent = false;
    },
    out: function() {
      removeIntent = true;
    },
    beforeStop: function(event, ui) {
      itemContext = ui.item.context;
      if (removeIntent == true) {
        ui.item.remove();
        disp($("#list2").sortable('toArray'));
      }
      //console.log(itemContext);

    },
    receive: function(event, ui) {
      console.log(ui);
      console.log(event);
      var this_id = $(ui.item).attr("id");
      var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

      $(itemContext).attr("id", this_id);
      $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
      $(itemContext).html(preview);

      //console.log(this_id);
      //console.log(preview);

    }
  }); 
  $("#list2").sortable({
connectWith: "#list1",
over: function() {
  removeIntent = false;
},
out: function() {
  removeIntent = true;
},
beforeStop: function(event, ui) {
  itemContext = ui.item.context;
  if (removeIntent == true) {
    ui.item.remove();
    disp($("#list2").sortable('toArray'));
  }
  //console.log(itemContext);

},
receive: function(event, ui) {
  console.log(ui);
  console.log(event);
  var this_id = $(ui.item).attr("id");
  var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

  $(itemContext).attr("id", this_id);
  $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
  $(itemContext).html(preview);

  $("#list2 .drop-container").sortable({
    connectWith: "#list1",
    over: function() {
      removeIntent = false;
    },
    out: function() {
      removeIntent = true;
    },
    beforeStop: function(event, ui) {
      itemContext = ui.item.context;
      if (removeIntent == true) {
        ui.item.remove();
        disp($("#list2").sortable('toArray'));
      }
      //console.log(itemContext);

    },
    receive: function(event, ui) {
      console.log(ui);
      console.log(event);
      var this_id = $(ui.item).attr("id");
      var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

      $(itemContext).attr("id", this_id);
      $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
      $(itemContext).html(preview);

      //console.log(this_id);
      //console.log(preview);

    }
   }); //.disableSelection()
  //console.log(this_id);
  //console.log(preview);

 }
 }); //.disableSelection()
 $("#list2").bind("sortupdate", function(event, ui) {
//console.log($('#list2'));
var result = $('#list2').sortable('toArray');
var str = '';
for (var i = 0; i < result.length; i++) {
  str += result[i] + "|";
  var tmp = "#" + result[i] + " .drop-container";
  if ($(tmp).length > 0) {
    $(tmp).each(function() {
      if ($(this).children("li").length) {
        str += $(this).parent()[0].id + "|";
        $(this).children("li").each(function() {
          str += this.id + "|";

        })
      }
    })
  }
} //console.log(result);
alert(str);
});
function disp(list) {
        var a=[];
    for (var i=0;i<list.length;i++){
            a.push(list[i]);
    }
    $( 'input' ).val(a.join('|'));
}

});

HTML：

<div class="workarea" style="border:1px solid green; width:60%; padding:0; margin:0 0 0 15px;float:left">
        <h3>Your List</h3>
        <ul id="list2" class="connectedSortable ui-sortable" style="width: 100%; min-height: 500px;">
            <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="997">
                5.jpg                           
                <span class="pull-right">
                    <div class="text-right hroffset">
                        <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                    </div>
                </span>
            </li>
            <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="998">
                6.jpg                           
                <span class="pull-right">
                    <div class="text-right hroffset">
                        <a data-toggle="modal" class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                    </div>
                </span>
            </li>
            <li class="ui-draggable ui-draggable-handle ui-state-default ui-sortable-handle" style="width: 500px; height: auto;" id="layoutdata_24_3">
                Layout4                                 
                <span class="pull-right">
                    <div class="text-right">
                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                    </div>
                </span>
                <ul class="layout_panels" style="float:left">
                    <li id="119" data-layout_id="24" style="width: 481px;">
                        <span class="pancls pull-left">Panel: New ( 1360  X 768 ) </span><span class="pull-right"></span>
                        <div class="clearfix"></div>
                        <ul class="drop-container ui-sortable" style="width: 478px;">
                            <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="1121">
                                <span class="pull-left">1.jpg</span>
                                <span class="pull-right">
                                    <div class="text-right hroffset">
                                        <a data-toggle="modal"class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                    </div>
                                </span>
                            </li>
                            <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="433">
                                <span class="pull-left">2.jpg</span>
                                <span class="pull-right">
                                    <div class="text-right hroffset">
                                        <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                    </div>
                                </span>
                            </li>
                            <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="996" >
                                <span class="pull-left">4.jpg</span>
                                <span class="pull-right">
                                    <div class="text-right hroffset">
                                        <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                    </div>
                                </span>
                            </li>
                            <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="995" >
                                <span class="pull-left">3.jpg</span>
                                <span class="pull-right">
                                    <div class="text-right hroffset">
                                        <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
                                        <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
                                    </div>
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

想要将项目放到面板区域之外。我该怎么做？代码有问题吗？

Answer 1

您的 Fiddle 出现 Javascript 错误，因为找不到 disp。您要么在此处没有 function 并且需要实现它，要么它存在于您的代码中，但未添加到 Fiddle。无论如何，拖动是有效的，但你需要有一个function，它会显示你放在盒子里的东西。从名称来看，disp 应该是这样做的，你需要修复或实施它，具体取决于你的情况。