首页 > 代码库 > 带边框的拖拽

带边框的拖拽

<!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>

带边框的拖拽