實例

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;

}

}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

總結

以上是生活随笔為你收集整理的php拖拽原理,JS拖拽原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。