單擊鼠標將div放置在另一個div中
[英]Placing a div inside another div on mouse click
問題描述
通過單擊按鈕，我能夠生成可拖動的div，然后將其放置在另一個div（容器）內。 通過單擊按鈕創建的div會自動放置在父級（容器）div的左側。 然后，用戶可以將其拖動到所需位置。 有沒有一種方法可以讓用戶生成新的div，然后讓他們通過單擊鼠標來確定此新div的位置？ JSFIDDLE
當用戶確定位置並在容器中懸停時，會提供一些類似於以下內容的臨時指南：
jQuery的
$('#button').click(function (e) {
$('<div />', {
'class': 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
});
});
的HTML
<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
<div class="middle-side"></div>
</div>
3 個解決方案
解決方案1
0 2014-08-27 20:28:39
當鼠標進入div時，此示例將創建一個div。 當您單擊新的div時，您可以在其中移動它；當您釋放鼠標時，單擊div將停留在離開它的位置。 然后，您可以將其拾起並隨意移動多次。
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<style>
#testArea{
display:block;
height:200px;
width:200px;
border:1px solid black;
}
#testArea div{
position:relative;
display:block;
background:green;
height:20px;
width:100px;
}
</style>
</head>
<body>
<div id="mousePosition"></div>
<div id="dragState">Drag state false</div>
<div id="testArea"></div>
<script>
var dragging=false;
document.getElementById("testArea").addEventListener("mouseover",function(){
if(!this.firstElementChild&&!this.firstChild){
var newDiv = document.createElement("div");
newDiv.innerHTML="Hello World";
newDiv.addEventListener("mousedown",function(e){
this.style.background="red";
dragging=true;
document.getElementById("dragState").innerHTML="Drag state true";
},false);
document.addEventListener("mousemove",function(e){
document.getElementById("mousePosition").innerHTML="X: "+e.clientX+" Y: "+e.clientY;
if(dragging){
var rect = document.getElementById("testArea").getBoundingClientRect();
newDiv.style.top = e.clientY-rect.top+"px";
newDiv.style.left = e.clientX-rect.left+"px";
}
},false);
document.addEventListener("mouseup",function(e){
newDiv.style.background="green";
dragging=false;
document.getElementById("dragState").innerHTML="Drag state false";
},false);
this.appendChild(newDiv);
}
},false);
</script>
</body>
</html>
解決方案2
0 2014-08-27 20:38:49
這是您要做什么？
$('.middle-side').on('click',function (e) {
var x = (e.pageX -this.offsetLeft)+'px', y=(e.pageY -this.offsetTop) +'px';
$('<div />', {
'class': 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
}).css({
"position" : "absolute",
"top" : y,
"left" : x
});
});
我將此添加到CSS：
.middle-side {position:relative;}
看到小提琴
解決方案3
0 已采納 2014-08-27 20:40:40
這就是我在說的：
兩種選擇：
將鼠標懸停在div上：
document.getElementById('parentDiv').addEventListener('mouseover', function(event) {
var child = document.getElementById('childDiv');
var mouseX = event.clientX || event.pageX;
var mouseY = event.clientY || event.pageY;
var top = mouseY - 50;
var left = mouseX - 50;
child.style.top = top.toString()+"px";
child.style.left = left.toString()+"px";
});
單擊時顯示div： http : //jsfiddle.net/7s2mykr9/
document.getElementById('parentDiv').addEventListener('click', function(event) {
var child = document.getElementById('childDiv');
var mouseX = event.clientX || event.pageX;
var mouseY = event.clientY || event.pageY;
var top = mouseY - 50;
var left = mouseX - 50;
child.style.top = top.toString()+"px";
child.style.left = left.toString()+"px";
child.style.visibility = "visible";
});
代碼在那里，只需清理數學即可。
希望對您有所幫助
將div放在div中並居中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.