JavaScript如何通过点击和拖动来动态移动Div

9 浏览
0 Comments

JavaScript如何通过点击和拖动来动态移动Div

好的，看起来应该很简单。我需要将一个已经存在的div根据鼠标在窗口中的位置移动。我已经到处搜索过，但都是一些过于复杂的方法，并且涉及到使用jQuery。我需要严格使用JavaScript来完成我想做的事情。

方法：

var mousePosition;
var div;
(function createDiv(){
    div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "blue";
    div.addEventListener('mousedown', handleKeyPressed, true);
    document.body.appendChild(div);
})();
function handleKeyPressed(event) {
    event.preventDefault();
    mousePosition = {
        x : event.clientX,
        y : event.clientY
    };
    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;
    //alert("whoa!");
}

0