1
我創建了兩個可以拖動和重新調整大小的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>
謝謝...
你能解釋一點嗎? –
好吧,看我的更新 –
謝謝...... :)另一個小問題......爲什麼我不能拖動div div到div2? –