php拖拽原理,JS中拖拽元素实现的原理-2019年1月18日

实例

html>

拖拽

#ball {

width: 50px;

height: 50px;

background-color: lightpink;

border-radius: 50%;

box-shadow: 2px 2px 1px #888;

position:absolute;

}

// onmousedown: 选择, onmouseover: 移动, onmouseup:放下

var ball = document.getElementById('ball');

// 选中这个小球

// onmousedown

//找到小球的位置:

// 当前鼠标到小球边沿的距离相对是不变的,变得只是小球到左边与顶部的距离

// 这个不变的距离 ,是鼠标点击下去的一瞬间就确定了,就可以求出来了

// 根据当前鼠标到当前可视区的距离

// 求出鼠标当前位置

ball.onmousedown = function (event) {

var x = event.clientX - this.offsetLeft;

var y = event.clientY - this.offsetTop;

console.log(x, y);  // offsetLeft只读,返回数值

// 移太快,鼠标跑出小球了,怎么办, 应该把事件添加到整个文档就可以了,再快, 也不会跑出浏览器窗口吧

// ball.onmousemove = function (event) {

document.onmousemove = function (event) {

ball.style.left = event.clientX - x + 'px';

console.log(ball.style.left);  // 注意返回的是字符串

ball.style.top = event.clientY - y + 'px';

}

// ball.onmouseup = function () {

document.onmouseup = function () {

// ball.onmousemove = null;

document.onmousemove = null;

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例