jsを使ってレイヤーのドラッグ機能を実現します。
1888 ワード
1.需要分析：元素を設計して、マウスの移動に従って、元素も移動します。マウスを押す時と元素を押す時、元素も同様にスタイルの色を変えることができます。
2.設計思想：まず元素を取得し、元素にマウスをバインドして押すイベントで、バインディングされたイベントでは、イベントに対応して、マウスの座標と元素の座標を取得し、マウスの座標から要素の座標を減算すると、マウスの元素内の座標が得られます。バインディングイベントでは、要素の移動イベントを書き込み、要素の移動座標を取得します。最後に、マウスを押したイベント関数では、要素の移動イベントを呼び出すことができます。
2.設計思想：まず元素を取得し、元素にマウスをバインドして押すイベントで、バインディングされたイベントでは、イベントに対応して、マウスの座標と元素の座標を取得し、マウスの座標から要素の座標を減算すると、マウスの元素内の座標が得られます。バインディングイベントでは、要素の移動イベントを書き込み、要素の移動座標を取得します。最後に、マウスを押したイベント関数では、要素の移動イベントを呼び出すことができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
border: 2px solid #ccc;
cursor: pointer;
position: absolute;
top: 20px;
left: 100px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
var box = document.getElementById("box");
box.onmousedown = function(env){
// event
var env = env || window.event;
//
var x = env.clientX;
var y = env.clientY;
//
var left = box.offsetLeft;
var top = box.offsetTop;
//
var x_left = x - left;
var y_top = y -top;
//
box.style.background = "red";
//
box.onmousemove = function(env){
// event
var env = env || window.event;
//
var x = env.clientX;
var y = env.clientY;
//
box.style.left = (x - x_left)+"px";
box.style.top = (y - y_top)+"px";
}
};
//
box.onmouseup = function(){
box.style.background = "skyblue";
//
box.onmousemove = function(){};
};
</script>
</html>