在另一个div内放置一个div点击鼠标
使用按钮单击我可以生成可拖动的div，然后将其放置在另一个div（容器）内。从按钮点击创建的div自动放置在父容器div的左侧。然后用户可以将其拖动到所需的位置。有没有办法让用户生成新的div，然后让他们用鼠标点击确定这个新的div的位置？ JSFIDDLE在另一个div内放置一个div点击鼠标
由于用户是搞清楚的位置和徘徊通过容器提供某种形式的临时指导这样的事情如下：
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>
这就是我说的是：
两个选项：
鼠标悬停举动该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";
});
代码是存在的，只是清理数学。
我希望它能帮助
好吧，我需要两个组合！ – 2014-08-27 20:47:15
这个例子会在鼠标进入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>
这是你正在尝试做什么？
$('.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;}
哦，是的，这越来越接近。但是所需的顺序是：首先用按钮单击将文本附加到div，然后通过鼠标单击来放置位置。应该只允许点击“
”内的某个位置，而不要在其他位置。 – 2014-08-27 20:43:27嗯..是的。它是这样做的....也许我粘贴了错误的链接.... http://jsfiddle.net/0wbnud4k/16/ – 2014-08-27 20:54:05
添加'overflow：hidden;'到'。如果你不希望创建的div出现在外面，那么你可以选择“middle-side”类。 – 2014-08-27 20:58:35
如果我没有误解的问题，为什么不只是使股利（内）绝对并设置其坐标位置的onclick父DIV的？它将设置内部div的坐标几乎是X == [currentMouseX - （divWidth/2），currentMouseY - （divHeight/2）] – Fer 2014-08-27 20:26:54
不确定我在追随。可以证明，在Jsfiddle？ – 2014-08-27 20:28:28
我刚刚发布了它，这两个例子。我认为第一个更直接相关，重新读你的问题后，但你可以检查他们两个。祝你好运。 – Fer 2014-08-27 20:47:44