Javascript 单击鼠标将一个div放置在另一个div中_Javascript_Jquery

Javascript 单击鼠标将一个div放置在另一个div中

javascript jquery

Javascript 单击鼠标将一个div放置在另一个div中,javascript,jquery,Javascript,Jquery,通过单击按钮，我可以生成可拖动的div，然后将其放置在另一个div（容器）中。通过单击按钮创建的div将自动放置在父（容器）div的左侧。然后，用户可以将其拖动到所需位置。有没有一种方法可以让用户生成新的div，然后让他们通过单击鼠标来确定这个新div的位置当用户计算出位置并在容器中悬停时，提供某种临时指南，如下所示： Jquery $('#button').click(function (e) { $('<div />', { 'class': 'dra

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

当用户计算出位置并在容器中悬停时，提供某种临时指南，如下所示：

Jquery

$('#button').click(function (e) {
    $('<div />', {
        'class': 'draggable ui-widget-content',
        text: $('textarea').val(),
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent'
        }
    });
});

$（“#按钮”）。单击（函数（e）{
$('', {
“类”：“可拖动的ui小部件内容”，
text:$（'textarea'）.val（），
附录：'.middle side'，
可拖动：{
遏制：“家长”
}
});
});

HTML

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


实例
#特斯特雷亚{
显示：块；
高度：200px；
宽度：200px；
边框：1px纯黑；
}
#测试区分区{
位置：相对位置；
显示：块；
背景：绿色；
高度：20px；
宽度：100px；
}
拖动状态为false
var=false；
document.getElementById（“testArea”）.addEventListener（“mouseover”，function（））{
if（！this.firstElementChild&！this.firstChild）{
var newDiv=document.createElement（“div”）；
newDiv.innerHTML=“你好世界”；
newDiv.addEventListener（“鼠标向下”，函数（e）{
this.style.background=“red”；
拖动=真；
document.getElementById（“dragState”）.innerHTML=“拖动状态为true”；
}，假）；
文档.添加的事件列表器（“mousemove”，函数（e）{
document.getElementById（“鼠标位置”）.innerHTML=“X:+e.clientX+”Y:+e.clientY；
如果（拖动）{
var rect=document.getElementById（“testArea”）.getBoundingClientRect（）；
newDiv.style.top=e.clientY-rect.top+“px”；
newDiv.style.left=e.clientX-rect.left+“px”；
}
}，假）；
文件.附录列表器（“鼠标”，函数（e）{
newDiv.style.background=“绿色”；
拖动=假；
document.getElementById（“dragState”）.innerHTML=“拖动状态为false”；
}，假）；
这个.appendChild（newDiv）；
}
}，假）；

这就是你想要做的吗

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

请看

这就是我所说的：

两种选择：

鼠标悬停时，移动div：

单击“显示div”：

代码就在那里，把数学整理一下

我希望这会有所帮助

如果我没有误解这个问题，为什么不将div（内部）的位置设置为绝对位置，并在单击父div时设置其坐标？将内部div的坐标设置为X==[currentMouseX-（divWidth/2），currentMouseY-（divHeight/2）]，我不确定是否在跟踪。我刚刚发布了两个示例。我认为第一个问题更直接相关，在重新阅读你的问题后，但你可以检查这两个问题。祝你好运。哦，是的，越来越近了。但所需的顺序是：首先通过单击按钮将文本附加到div，然后通过单击鼠标放置位置。应该只允许点击

内的某个位置，而不允许点击其他位置。嗯。。是啊是这样的。。。。也许我粘贴了错误的链接。。。。添加

溢出：隐藏to。middle side类。好的，很好，我需要两者的组合！
$('.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
});
});

.middle-side {position:relative;}

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";
});

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";
});