实例

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');

ball.onmousedown = function(event) {

var x = event.clientX - this.offsetLeft;

var y = event.clientY - this.offsetTop;

// console.log(x,y);

document.onmousemove = function(event) {

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

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

}

document.οnmοuseup=function(){

document.οnmοusemοve=null;

}

}

运行实例 »

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