嵌套拖放使用jquery ui不能正常工作

Question

我已經開發了使用jquery ui的嵌套拖放，但它不允許我放置
.drop-container div之外。這裏是的jsfiddle審查：

FIDDLE

一旦我拖累了項目，將其拖放到＃DIV列表2，它不工作。我如何解決它？

下面是代碼：

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

您的小提琴有一個Javascript錯誤，因爲找不到disp。你或者沒有這個function這裏需要實現它，或者它存在於你的代碼中，但沒有被添加到小提琴中。無論如何，拖動的作品，但你需要有一個function這將顯示你在盒子裏放下的東西。從名稱來看，disp應該這樣做，您需要修復或實施它，具體取決於您的情況。