js 实现简单的拖拽

zoukankan html css js c++ java

js 实现简单的拖拽
步骤

使用 JavaScript 实现拖拽的步骤：
- 让元素捕获事件（mousedown, mousemove & mouseup）
- 单击并不释放，触发 mousedown，标记开始拖拽，并获取元素和鼠标的位置
- 拖动鼠标，触发 mousemove，不断的获取鼠标的位置，并通过计算重新确定元素的位置
- 释放师表，触发 mouseup，结束拖拽，确定元素位置并更新
代码1：

demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #block {
            200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="block"></div>
<script>
    /**
     * 拖动元素
     * @param elementId 元素id
     */
    function drag(elementId) {
        var element = document.getElementById(elementId);
        var position = {
            offsetX: 0, //点击处偏移元素的X
            offsetY: 0, //偏移Y值
            state: 0 //是否正处于拖拽状态，1表示正在拖拽，0表示释放
        };
        //获得兼容的event对象
        function getEvent(event) {
            return event || window.event;
        }
        //元素被鼠标拖住
        element.addEventListener('mousedown', function (event) {
            //获得偏移的位置以及更改状态
            var e = getEvent(event);
            position.offsetX = e.offsetX;
            position.offsetY = e.offsetY;
            position.state = 1;
        }, false);
        //元素移动过程中
        document.addEventListener('mousemove', function (event) {
            var e = getEvent(event);
            if (position.state) {
                position.endX = e.clientX;
                position.endY = e.clientY;
                //设置绝对位置在文档中，鼠标当前位置-开始拖拽时的偏移位置
                element.style.position = 'absolute';
                element.style.top = position.endY - position.offsetY + 'px';
                element.style.left = position.endX - position.offsetX + 'px';
            }
        }, false);
        //释放拖拽状态
        element.addEventListener('mouseup', function (event) {
            position.state = 0;
        }, false);
    }
    drag('block');
</script>
</body>
</html>
demo2.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="box" class="box" style=" 100px;height: 100px; position: absolute;background: red;cursor: move;"></div>
<script>
(function () {
var dragging = false;
var boxX, boxY, mouseX, mouseY, offsetX, offsetY;
var box = document.getElementById('box');
box.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
function down(e) {
    dragging = true;
    boxX = box.offsetLeft;
    boxY = box.offsetTop;
    mouseX = parseInt(getMouseXY(e).x);
    mouseY = parseInt(getMouseXY(e).y);
    offsetX = mouseX - boxX;
    offsetY = mouseY - boxY;
}
function move(e) {
    if (dragging) {
      var x = getMouseXY(e).x - offsetX;
      var y = getMouseXY(e).y - offsetY;
      var width = document.documentElement.clientWidth - box.offsetWidth;
      var height = document.documentElement.clientHeight - box.offsetHeight;
      x = Math.min(Math.max(0, x), width);
      y = Math.min(Math.max(0, y), height);
      box.style.left = x + 'px';
      box.style.top = y + 'px';
    }
}
function up(e) {
    dragging = false;
}
function getMouseXY(e) {
    var x = 0, y = 0;
    e = e || window.event;
    if (e.pageX) {
      x = e.pageX;
      y = e.pageY;
    } else {
      x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
      y = e.clientY + document.body.scrollTop - document.body.clientTop;
    }
    return {
      x: x,
      y: y
    };
}
})()
</script>
</body>
</html>
进阶：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.block {
100px;
height: 30px;
background-color: yellow;
position: absolute;
left : 50px;
margin-top : 10px;
}
</style>
</head>
<body style="height : 1000px">
<div style="400px; height:400px;background-color: #777;position: relative;">
<div id="block1" class="block"></div>
<div id="block2" class="block"></div>
<div id="block3" class="block"></div>
<div id="block4" class="block"></div>
</div>
<script>
/**
* 拖动元素
* @param elementId 元素id
*/
function drag(elementId) {
var element = document.getElementById(elementId);
var position = {
elementX: 0,
elementY: 0,
mouseX: 0,
mouseY: 0,
state: 0
};
//获得兼容的event对象
function getEvent(event) {
return event || window.event;
}

function getMouse(e) {
var x = 0, y = 0;
e = e || window.event;
if (e.pageX) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
y = e.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: x,
y: y
};
}
//元素被鼠标拖住
element.addEventListener('mousedown', function (event) {
//获得偏移的位置以及更改状态
var aaa = this;
var mouse = getMouse(event);
position.mouseX = mouse.x;
position.mouseY = mouse.y;
position.elementX = element.offsetLeft;
position.elementY = element.offsetTop;
position.state = 1;

//console.log(mouseXY.x + " " + mouseXY.y);
}, false);
//元素移动过程中
document.addEventListener('mousemove', function (event) {
var mouse = getMouse(event);
if (position.state) {
//设置绝对位置在文档中，鼠标当前位置-开始拖拽时的偏移位置
var x = mouse.x - position.mouseX;
var y = mouse.y - position.mouseY;
var parent = element.parentNode;
if (position.elementX + x + element.offsetWidth <= parent.offsetLeft + parent.offsetWidth) {
element.style.left = position.elementX + x + 'px';
} else {
element.style.left = parent.offsetLeft + parent.offsetWidth - element.offsetWidth + 'px';
}
element.style.top = position.elementY + y + 'px';

element.style.opacity = 0.3;
//console.log(e.clientY + " " + element.offsetTop);
}
}, false);
//释放拖拽状态
document.addEventListener('mouseup', function (event) {
position.state = 0;
element.style.opacity = 1;
}, false);
}

drag('block1');
drag('block2');
drag('block3');
drag('block4');
</script>
</body>
</html>
查看全文

相关阅读:
gflag使用
 INTERVIEW #2
Decision Tree
Java FAQ
K-Nearest Neighbors
INTERVIEW #1
C++ FAQ
INTERVIEW #0
Selection Sort
TCP 3-Way Handshake

原文地址：https://www.cnblogs.com/taobr/p/9940421.html

js 实现简单的拖拽

步骤

代码1：