Javascript：使用鼠标事件移动图像

Question

我看到了其他解决方案，但它们从未为我工作。 我在单击图像时遇到麻烦，让它跟随光标，然后在再次单击时释放。 到目前为止，当我单击一次时，只有光标之后的图像，但是不知道如何实现再次单击时停止它。 这是我到目前为止的内容：

function moveImage(e) {
        var x = e.clientX-100;
        var y = e.clientY-100;

        document.getElementById("image").style.left = x + "px";
        document.getElementById("image").style.top = y + "px";

}   

function move(e) {
    document.addEventListener("mousemove", dragImage);
}

window.addEventListener("click", move, false);

如何使图像停止在点击鼠标后？

Answer 1

 $(document).ready(function() { $("#div1").mousemove(function(e) { var w = $(".image").css("width"); w=parseFloat(w); w=w/2; var h = $(".image").css("height"); h=parseFloat(h); h=h/2; $(".image").css({ display:'block', left: e.pageX - w, top: e.pageY - h }); }); $("#div1").mouseout(function(e) { $("#img1").css("display","none"); }); }); 

 .image { display:none; position: absolute; width: 200px; height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="img1" class="image" src="http://static2.businessinsider.com/image/59318bbeb74af41c008b605f/nuclear-bombs-trigger-a-strange-effect-that-can-fry-your-electronics--heres-how-it-works.jpg" /> <div id="div1" style="width:100%; height:500px; background-color:#09F"> 

这是你想要的吗？

我在js中不好，但这是jQuery