如何防止重疊兩個引導樣式的div可以重新調整大小和拖動？

我創建了兩個可以拖動和重新調整大小的div。我用bootstrap來設計這兩個div。代碼很好，我可以精細地拖動和重新調整兩個div的大小。但是這兩個div是重疊的。我做錯了什麼？這是我的代碼。如何防止重疊兩個引導樣式的div可以重新調整大小和拖動？

$('.draggable-handler').mousedown(function(e){ 
 
    drag = $(this).closest('.draggable') 
 
    drag.addClass('dragging') 
 
    drag.css('left', e.clientX-$(this).width()/2) 
 
    drag.css('top', e.clientY-$(this).height()/2 - 10) 
 
    $(this).on('mousemove', function(e){  
 
    drag.css('left', e.clientX-$(this).width()/2) 
 
    drag.css('top', e.clientY-$(this).height()/2 - 10) 
 
    window.getSelection().removeAllRanges() 
 
    }) 
 
}) 
 

 
$('.draggable-handler').mouseleave(stopDragging) 
 
$('.draggable-handler').mouseup(stopDragging) 
 

 
function stopDragging(){ 
 
    drag = $(this).closest('.draggable') 
 
    drag.removeClass('dragging') 
 
    $(this).off('mousemove') 
 
}

@media (min-width: 600px) and (min-height: 600px) { 
 
    
 
     .panel{ 
 
      background-size: cover; 
 
      max-width: 1000px; 
 
      margin-left: 10px; 
 
      margin-right: 10px; 
 
      margin-top: 10px; 
 
      max-height: 1000px; 
 
      cursor: move; 
 
      resize: both; 
 
      background-color: #E6E6FA; 
 
     } 
 
      
 
     .panel-body{ 
 
      background-color: #E6E6FA; 
 
      background-size: cover; 
 
     } 
 
      
 
     } 
 

 
     .resizable{ 
 
      overflow: hidden; 
 
      resize:both; 
 
      background-size: cover;  
 
     } 
 
     
 
     .draggable{ 
 
      position: absolute; 
 
      z-index: 100; 
 
     } 
 
     
 
     .draggable-handler{ 
 
      cursor: pointer; 
 
     } 
 
     
 
     .dragging{ 
 
      cursor: move; 
 
      z-index: 200 !important; 
 
     }

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<html lang="en"> 
 
<head> 
 
    
 
    <title>Replayable widget</title> 
 
     
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 
</head> 
 
    
 
<body> 
 

 
<div id="div1_panel" class="panel panel-primary resizable draggable" > 
 
    <div class="panel-heading draggable-handler"> 
 
     <h3 class="panel-title"><b>Div1</b></h3> 
 
    </div> 
 
    
 
    <div class="panel-body"> 
 
     <b>Hi, I'm div1</b> 
 
    </div> 
 
</div> 
 

 
    
 
<div id="div2_panel" class="panel panel-primary resizable draggable" > 
 
    <div class="panel-heading draggable-handler"> 
 
     <h3 class="panel-title"><b>Div2</b></h3> 
 
    </div> 
 
    
 
    <div class="panel-body"> 
 
     <B>Hi, I'm div2</B> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

謝謝...

來源

2015-10-05 Desi Delite

你在課堂上.draggable同時設置的div position:absolute。這就是爲什麼兩個div都在左上角（left: 0px,top: 0px）。一種解決方案是在拖動開始之前，即在mousedown事件處添加樣式position: absolute;。

如： https://jsfiddle.net/m3rg34qm/

所有我的小提琴做的是

從.draggable類
添加drag.css('position', 'absolute');的onmousedown處理
分配了一個靜態的寬度內去除position: absolute貨櫃.panel

來源

2015-10-05 09:54:02

你能解釋一點嗎？ –

好吧，看我的更新 –

謝謝...... :)另一個小問題......爲什麼我不能拖動div div到div2？ –

如何防止重疊兩個引導樣式的div可以重新調整大小和拖動？

回答

相關問題