JavaScriptマウスをドラッグして枠を描いて選択を実現します.
6884 ワード
プログラミングを勉強して、あなたと一緒に勉強します.JavaScriptに対してマウスをドラッグして枠を描いて、選択の方法を実現します.ネットでたくさん調べましたが、書いたのではないという感じがします.詳しい手順はありません.これは私達のこれらの初心者にとって本当に理解しにくいです.だから、簡単できれいなものを書きました.まずコードを入れてください.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#box{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;position: relative;}
#box div{border: 1px solid green;position: absolute;}
style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
// ，
oBox.onmousedown = function (ev) {
ev = window.event || ev;
//1.
var x1 = ev.clientX - oBox.offsetLeft;
var y1 = ev.clientY - oBox.offsetTop;
//2. div
var oDiv = document.createElement("div");
oBox.appendChild(oDiv);
oBox.onmousemove = function (ev) {
ev = window.event || ev;
var x2 = ev.clientX - oBox.offsetLeft;
var y2 = ev.clientY - oBox.offsetTop;
//3. div
oDiv.style.left = (x2 > x1 ? x1 : x2) +"px";
oDiv.style.top = (y2 > y1 ? y1 : y2) +"px";
oDiv.style.width = Math.abs(x2-x1)+"px";
oDiv.style.height =Math.abs(y2-y1)+"px";
}
return false; // BUG
}
// onmousemove
document.onmouseup = function () {
oBox.onmousemove = null;
}
}
script>
head>
<body>
<div id="box">div>
body>
html> var oDiv = document.createElement("div"); // div
oBox.appendChild(oDiv); //
oDiv.style.left = "100px"; //
oDiv.style.top = "100px";
oDiv.style.width = "100px";
oDiv.style.height = "100px";