jquery排序困難和拖動大項目底部

基本上我有兩個'小工具'列表中的每一個，其中一些可以是相當大的。我簡化了所有的代碼。這裏是JavaScriptjquery排序困難和拖動大項目底部

<script type="text/javascript"> 
    $(function() { 
     $(".homepage-right").sortable({ 
      revert: 200, 
      connectWith:["#homepage-left","#homepage-right"], 
      placeholder: "homepage-element-placeholder", 
      cancel: ".homepage-disable-drag", 
      opacity:0.7, 
      distance:30, 
      handle:".box-title", 
      start: function (event,ui) { 
       height = $(ui.item).outerHeight(); 
       left_height = $("#homepage-right").height(); 
       $("#homepage-left").attr(\'height\',(height+left_height)+\'px\'); 
       $(".homepage-left").css(\'padding-bottom\',height*2); 
       $(".homepage-element-placeholder").css(\'height\',height); 
      }, 
      receive: function(event,ui) { 
       homepage_reload_node(event,ui,2); 
      }, 
      stop: function(event,ui) { 
       homepage_save_layout(); 
        $(".homepage-left").css(\'padding-bottom\',\'0px\'); 
        $(".homepage-right").css(\'padding-bottom\',\'0px\'); 
      }   
     }); 
     $(".homepage-left").sortable({ 
      revert: 200, 
      connectWith:["#homepage-left","#homepage-right"], 
      placeholder: "homepage-element-placeholder", 
      cancel: ".homepage-disable-drag", 
      opacity:0.7, 
      handle:".box-title", 
      start: function (event,ui) { 
       height = $(ui.item).outerHeight(); 
       left_height = $("#homepage-right").height(); 
       $("#homepage-right").attr(\'height\',(height+left_height)+\'px\'); 
       $(".homepage-right").css(\'padding-bottom\',height*2); 
       $(".homepage-element-placeholder").css(\'height\',height); 
      }, 
      receive: function(event,ui) { 
       homepage_reload_node(event,ui,1); 
      }, 
      stop: function(event,ui) { 
       homepage_save_layout(); 
       $(".homepage-left").css(\'padding-bottom\',\'0px\'); 
        $(".homepage-right").css(\'padding-bottom\',\'0px\'); 
      }   
     }); 
    }); 


</script>

這裏是HTML

 <div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 

</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div> 

    </div> 

<div id="homepage-left" class="homepage-left"> 
    <div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 
</div> 
</div> 

</div><div class="box_white" style=";" id="homepage_object_5"> 
<div class="box-title"><div style="float:right;"> 
     <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3 >title</a></h3><div class="clear"></div></div> 

     <div class="box-content" ><div style="text-align:center;margin-top: 10px;"> 
      some content 

</div> 
</div> 

</div> 
</div>

他們基本上是一個2列表中的一個比其他稍寬。我遇到的問題是將一個元素從最下面的一個列表拖到另一個列表不會顯示佔位符。我已經（如你所見）在拖動時嘗試添加額外的高度和填充，但它似乎沒有幫助。佔位符和拖動只有在獲得小部件後纔可用，然後觸摸前一部分的底部。有沒有解決這個問題？謝謝 Richard

來源

2011-11-30 Richard Housham

K發現答案基本上是填充，你也需要調用刷新命令。所以

像這樣

$(".homepage-left").sortable({ 
      revert: 200, 
      refreshPositions :true, 
      connectWith:["#homepage-left","#homepage-right"], 
      placeholder: "homepage-element-placeholder", 
      cancel: ".homepage-disable-drag", 
      opacity:0.7, 
      scroll: true, 
      handle:".box-title", 
      tolerance :"intersect", 
      dropOnEmpty:true, 
      start: function (event,ui) { 
       height = $(ui.item).outerHeight(); 
       width = $(ui.item).outerWidth(); 
       left_height = $("#homepage-right").height(); 
       $(".homepage-right").css(\'padding-bottom\',height); 
       $(".homepage-left").css(\'padding-bottom\',height); 
       $(".homepage-element-placeholder").css(\'height\',height); 
       $(".homepage-element-placeholder").css(\'width\',width); 
       $("#homepage-right").sortable(\'refresh\'); 
       $("#homepage-left").sortable(\'refresh\'); 

      }, 
      receive: function(event,ui) { 
       homepage_reload_node(event,ui,1); 
      }, 
      stop: function(event,ui) { 
       homepage_save_layout(); 
       $(".homepage-left").css(\'padding-bottom\',\'0px\'); 
       $(".homepage-right").css(\'padding-bottom\',\'0px\'); 
      }   
     });

添加在兩側填充會幫助，如果你想保留的項目早在它的位置。一切都好！

來源

2011-11-30 11:20:49

這很有幫助 - 在啓動和停止時添加填充足以爲我解決這個問題。謝謝！ – mcw0933

jquery排序困難和拖動大項目底部

回答

相關問題