Question

点击按钮，我可以生成可拖动的div，然后将其放在另一个div（容器）中。通过按钮单击创建的div将自动放置在父（容器）div的左侧。然后，用户可以将其拖动到所需位置。有没有办法让用户生成新的div然后让他们用鼠标点击确定这个新div的位置？ JSFIDDLE

当用户弄清楚位置并在容器中盘旋时，提供某种临时指南，如下所示：

enter image description here

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>

Answer 1

此示例将在鼠标进入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>

Answer 2

这是你想要做的吗？

$('.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;}

请参阅fiddle

Answer 3

这就是我所说的：

两个选项：

在鼠标悬停时移动div：

http://jsfiddle.net/Lqebpaov/

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中

3 个答案: