JS拖拽效果，代碼精幹，通俗易懂！

時間 2019-11-24

標籤效果代碼精幹通俗易懂欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>html

<html>htm

<head>ip

<title></title>it

<style>io

div{event

margin-top: 10px;function

width: 200px;cli

height: 150px;sed

background: #dadada;

position: absolute;

cursor:move;

}

</style>

</head>

<body>

var drag=false;

var x, y,movex,movey;

var movediv =document.getElementById('div');

movediv.onmousedown=function(){

drag=false;

x = window.event.clientX; /*當前鼠標座標*/

y =window.event.clientY;

movex = movediv.offsetLeft; /*當前元素座標*/

movey =movediv.offsetTop

}

document.onmousemove=function(){

if(drag) return false;

movediv.style.top= movey + window.event.clientY -y +'px';

movediv.style.left= movex + window.event.clientX -x +'px';

}

document.onmouseup=function(){drag=true}

</script>

</body>

</html>

相關標籤/搜索