这是我的代码:
<!doctype html>
<html lang="en">
<head>
<title> Mrb. :) </title>
<style>
h1{
text-align: center;
}
#finishImage {
width:64px;
height:64px;
}
#palette{
position: absolute;
height: 535px;
border: 1px solid orangered;
top: 10px;
left: 10px;
right: 1125px;
}
#content{
position: absolute;
height: 400px;
border: 1px solid black;
top: 135px;
left: 250px;
right: 10px;
}
#header{
position: absolute;
height: 115px;
border: 1px solid orange;
left: 250px;
right: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="palette">
<h1>PALETTE</h1>
<hr>
<div class="tbutton"><img id="finishImage" src="finish.png" /></div>
</div>
<div id="content">
</script>
<script type="text/javascript">
$("#finishImage").draggable({
helper: "clone"
});
$("#content").droppable({
drop: function(event, ui) {
$("#content").append("<img id='finishImage' src='as.jpg'/>");
}
});
</script>
</div>
</div>
</body>
</html>
我正在从 div 面板 拖放到 div 内容。
一切都很好但是。我想做这个放置鼠标的位置。就像窗口生成器一样。
我的代码总是放置 x:0 y:0 位置，如下所示:
我怎样才能做到“放置鼠标位置”。
最佳答案
我将其添加到你的 JS
$("#content").droppable({
drop: function(event, ui) {
var pos = $("#content").position()
$("#content").append("<img id='finishImage' src='as.jpg' style='left: "+(event.pageX-pos.left)+"px; top: "+(event.pageY-pos.top)+"px'/>");
}
});
并将其添加到您的 CSS
#content #finishImage{
position :absolute
}
我在添加图片时添加了顶部和左侧样式属性，该属性是根据鼠标位置(pageX/pageY)判断的，并考虑了 Div(position.左/.top)
Heres a codePen带有可移动物体
关于javascript - 使用 Jquery 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45237825/