js实现鼠标拖拽效果的HTML怎么写,JS实现鼠标按下拖拽效果

原生JS实现鼠标按下拖拽效果，供大家参考，具体内容如下

鼠标拖动

body {

margin: 0;

}

div {

width: 200px;

height: 200px;

position: absolute;

background-color: pink;

}

//定义变量储存div的宽高

var obj_w, obj_h;

//定义一个变量判断是否执行移动函数

var mouseDown = false;

//鼠标按下函数

function downDiv(obj) {

//获取div的宽高

obj_w = obj.offsetWidth;

obj_h = obj.offsetHeight;

//鼠标

var e = event || window.event;

//e.clientX/Y 是获取鼠标相对浏览器的位置；将div中心自动居中到鼠标

obj.style.left = (e.clientX - obj_w / 2) + "px";

obj.style.top = (e.clientY - obj_h / 2) + "px";

console.log(obj.style.left, obj.style.top)

//按下时为ture,松开时为false，以判断是否执行执行mouveDiv

mouseDown = true;

}

//鼠标移动函数

function moveDiv(obj) {

obj_w = obj.offsetWidth;

obj_h = obj.offsetHeight;

var e = event || window.event;

console.log(e.clientX, e.clientY);

console.log(obj_w, obj_h);

if (mouseDown) {

obj.style.left = (e.clientX - obj_w / 2) + "px";

obj.style.top = (e.clientY - obj_h / 2) + "px";

console.log(obj.style.left, obj.style.top)

}

}

//鼠标松开函数

function upDiv(obj) {

mouseDown = false;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。