JavaScript如何通过单击和拖动来动态移动Div [英] JavaScript How to Dynamically Move Div by Clicking and Dragging

问题描述

好吧，它看起来应该很简单。我需要取一个已经存在的div，并根据鼠标在窗口中的位置移动它。我到处搜索，导致我做了同样事情的过度复杂的方法，并涉及使用j-查询。我需要严格使用JavaScript来做我想做的事。

方法：

  var mousePosition; 
 var div; 
 $ b $（函数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）; 
 
 
}）（）; 
 
函数handleKeyPressed（event）{
 
 event.preventDefault（）; 
 
 mousePosition = {
 
 x：event.clientX，
 y：event.clientY 
 
}; 
 
 div.style.left = mousePosition.x; 
 div.style.top = mousePosition.y; 
 
 // alert（whoa！）; 
 
 
  

解决方案

你正在寻找更像这样的东西

  var mousePosition; 
 var offset = [0,0]; 
 var div; 
 var isDown = false; 
 
 div = document.createElement（div）; 
 div.style.position =绝对; 
 div.style.left =0px; 
 div.style.top =0px; 
 div.style.width =100px; 
 div.style.height =100px; 
 div.style.background =red; 
 div.style.color =blue; 
 
 document.body.appendChild（div）; 
 
 div.addEventListener（'mousedown'，函数（e）{
 isDown = true; 
 offset = [
 div.offsetLeft  -  e.clientX，
 div.offsetTop  -  e.clientY 
]; 
}，true）; 
 
 document.addEventListener（'mouseup'，function（）{
 isDown = false; 
}，true）; 
 
 document.addEventListener（'mousemove'，function（event）{
 event.preventDefault（）; 
 if（isDown）{
 mousePosition = {
 
x：event.clientX，
y：event.clientY 
 
}; 
 div.style.left =（mousePosition.x + offset [0]）+' px'; 
 div.style.top =（mousePosition.y + offset [1]）+'px'; 
} 
}，true）; 
  

FIDDLE

Okay it would seem like it should be simple. I need to take an already existing div and move it according to mouse position within the window. I have searched everywhere and it has led me to over-complicated ways of doing the same thing and involves the use of j-query. I need to strictly use javascript for what I am trying to do.

Method :

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!");

}

解决方案

I think you're looking for something more like this

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

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

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

FIDDLE

这篇关于JavaScript如何通过单击和拖动来动态移动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！