javascript - 如何创建一个 img 并将其位置设置为光标位置

Question

我正在尝试做一些网页构造器，但遇到了一个问题——我有一个区域，你可以从你的电脑上拖放图像并将其放置在页面上。

然而，当创建 img 时，它放置在顶部 0 和左侧 0(当然应该如此)。问题是:

我应该如何修改我的代码以创建一个 img 并将其 left 和 top 设置为与您将 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 事件跟踪鼠标在“舞台”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>