单击鼠标将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.