我正在尝试做一些网页构造函数并面临一个问题 - 我有一个区域,你可以从你的电脑中删除图像,它将被放在页面上。
然而,当img被创建时,它放置在前0和左0(当然应该是)。问题是:
我应该如何修改我的代码来创建一个img,并将其left和top设置为与将img拖放到area时的光标位置相同。
这是我的代码:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $('<img class="draggable">')
img.attr('src', reader.result);
img.appendTo(document.body);
var $draggable = $('.draggable').draggabilly({
containment: '#none'
})
};
reader.readAsDataURL(input.files[0]);
}
}
注意:.draggable
类已经有position: absolute;
使用mousemove事件跟踪“stage”div中的鼠标位置,并将图像放置在下面的代码中:
var divPos = {};
var offset = $("#stage").offset();
$(document).mousemove(function(e){
divPos = {
left: e.pageX - offset.left,
top: e.pageY - offset.top
};
});
$("#stage").click(function(){
var i_width = 20
var i_height = 20
var img = $("<img width="+i_width+" height="+i_height+" src='https://d30y9cdsu7xlg0.cloudfront.net/png/96746-200.png'/>")
img.css("position","absolute");
img.css("left",(divPos.left-(i_width/2))+"px");
img.css("top",(divPos.top-(i_height/2))+"px");
$("#stage").append(img)
})
#wrapper{
padding: 20px;
}
#stage {
background: gray;
margin: 30px;
width: 300px;
height: 200px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<h1>Click inside gray area to place image</h1>
<div id="stage"></div>
我想你的.draggable也有身体作为父母
只需将你的$ draggable的偏移设置为img:
reader.onload = function (e) {
var img = $('<img class="draggable">')
img.attr('src', reader.result);
img.appendTo(document.body);
var $draggable = $('.draggable');
img.offset($draggable.offset);
$draggable.draggabilly({
containment: '#none'
});
};
如果您特别想获取光标坐标,并假设您有一些处理drop-event的函数,则可以使用事件的clientX
和clientY
属性:
function drop(event){
var xcoord = event.clientX;
var ycoord = event.clientY;
}
您可以随后在reader.onload
函数中使用这些坐标,例如将它们作为全局变量或将它们作为参数传递给readURL
函数,这实际上取决于您构建其余代码的方式。