Question

我正在尝试做一些网页构造函数并面临一个问题 - 我有一个区域，你可以从你的电脑上删除图像，它将被放在页面上。

然而，当img被创建时，它会放在前0和左0（当然应该是这样）。问题是：

如何修改我的代码以创建img并将其左和顶部设置为与将img拖放到区域时光标位置相同

这是我的代码：

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;

Answer 1

使用mousemove事件跟踪你的＆＃34;阶段＆＃34;中的鼠标位置。 div并将图像放置在下面的代码中：

＆＃13;

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

＆＃13;

#wrapper{
  padding: 20px;
  
}

#stage {
  background: gray;
  margin: 30px;
  width: 300px;
  height: 200px;
  position:relative;
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为你的.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'
            });
        };

Answer 3

如果您特别想获取光标坐标，并假设您有一些处理drop事件的函数，则可以使用事件的clientX和clientY属性：

function drop(event){
    var xcoord = event.clientX;
    var ycoord = event.clientY;
}

随后您可以在reader.onload函数中使用这些坐标，例如将它们作为全局变量或将它们作为参数传递给readURL函数，这实际上取决于您如何构建其余的{{1}}函数。你的代码。

如何创建img并将其位置设置为光标位置

3 个答案: