带边框的拖拽
Posted 小高
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带边框的拖拽相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box {
width: 100px;
height:100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
.new{
width: 100px;
height: 100px;
position: absolute;
border: green 1px dashed;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById(‘box‘);
oBox.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oBox.offsetLeft;
var disY = oEvent.clientY - oBox.offsetTop;
var oNew = document.createElement(‘div‘);
oNew.style.left = oBox.offsetLeft + ‘px‘;
oNew.style.top = oBox.offsetTop + ‘px‘;
oNew.className = ‘new‘;
oBox.parentNode.appendChild(oNew);
document.onmousemove= function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
oNew.style.left = l + ‘px‘;
oNew.style.top = t + ‘px‘;
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oBox.style.left = oNew.offsetLeft + ‘px‘;
oBox.style.top = oNew.offsetTop + ‘px‘;
oBox.parentNode.removeChild(oNew);
oBox.releaseCapture && oBox.releaseCapture();
}
oBox.setCapture && oBox.setCapture();
return false;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
以上是关于带边框的拖拽的主要内容，如果未能解决你的问题，请参考以下文章