首页 > 代码库 > 拖拽——带框

拖拽——带框

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #48565d } span.s4 { color: #289c97 } span.s5 { color: #d74200 } span.s6 { color: #000000 } span.s7 { color: #060606 } span.s8 { color: #929151 } span.s9 { color: #ad42ef } span.s10 { color: #698906 } span.s11 { color: #4a8a01 } span.s12 { color: #d16400 } span.s13 { color: #4663cc } span.s14 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box {

height: 300px;

width: 300px;

background-color: green;

position: absolute;

left: 0;

top: 0;

}

 

.border {

border: 2px dashed red;

position: absolute;

}

</style>

</head>

 

<body>

<div id="box">

 

</div>

</body>

<script type="text/javascript">

var box = document.getElementById("box");

var x = 0;

var y = 0;

box.onmousedown = function(ev) {

var oEvent = ev || event;

x = oEvent.clientX - box.offsetLeft;

y = oEvent.clientY - box.offsetTop;

//产生一个新的div,即为拖拽的框

var div = document.createElement("div");

div.className = "border";

div.style.width = box.offsetWidth + "px";

div.style.height = box.offsetHeight + "px";

div.style.left = box.offsetLeft + "px";

div.style.top = box.offsetTop + "px";

document.body.appendChild(div)

//鼠标移动的函数

document.onmousemove = function(ev) {

var oEvent = ev || event;

 

var L = oEvent.clientX - x;

var T = oEvent.clientY - y;

 

div.style.left = L + "px";

div.style.top = T + "px";

}

//鼠标抬起的函数

document.onmouseup = function() {

this.onmousemove = null;

this.onmouseup = null;

box.style.left = div.offsetLeft + "px";

box.style.top = div.offsetTop + "px";

document.body.removeChild(div);

}

 

return false;

 

}

</script>

 

</html>

拖拽——带框