拖拽带框
带框拖拽在可视区控制大小：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shmily</title>
<!--
* @Author: shmily
* @Date: 2016-12-05 11:38:54
* @Last Modified by: shmily
* @Last Modified time: 2016-12-05 11:38:54
-->
<style>
*{margin:0; padding:0;}
#box{width:200px; height:200px;background:#f90; position:absolute; top:0; left:0;}
</style>
<script>
function drag(sId){
var oBox = document.getElementById(sId);
var disX = 0;
var disY = 0;
oBox.onmousedown = function(ev)
{
var oEvent = ev||event;
var odiv = document.createElement('div');
odiv.style.width = '180px';
odiv.style.height = '180px';
odiv.style.border = '10px dashed #000';
odiv.style.left = oBox.offsetLeft +'px';
odiv.style.top = oBox.offsetTop +'px';
odiv.style.position = 'absolute';
document.body.appendChild(odiv);
disX = oEvent.clientX -oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop;
document.onmousemove = function(ev)
{
var oEvent = ev||event;
var l = oEvent.clientX -disX;
var t = oEvent.clientY -disY;
if(l < 0)
{
l = 0;
}
else if(l > document.documentElement.clientWidth - odiv.offsetWidth)
{
l = document.documentElement.clientWidth - odiv.offsetWidth
}
if(t < 0)
{
t = 0;
}
else if(t > document.documentElement.clientHeight - odiv.offsetHeight)
{
t = document.documentElement.clientHeight - odiv.offsetHeight
}
odiv.style.left = l +'px';
odiv.style.top = t +'px';
}
document.onmouseup = function()
{
oBox.style.left = odiv.offsetLeft +'px';
oBox.style.top = odiv.offsetTop +'px';
document.body.removeChild(odiv);
document.onmousemove = null;
document.onmouseup = null;
oBox.releaseCapture&&oBox.releaseCapture();
}
oBox.setCapture&&oBox.setCapture();
return false;
}
}
window.onload = function()
{
drag('box');
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////////////////
没有设置拖动的可视区：
<!--
* @Author: shmily
* @Date: 2016-12-05 11:38:54
* @Last Modified by: shmily
* @Last Modified time: 2016-12-05 11:38:54
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
#box{width:200px; height:200px; background:red; position:absolute; top:0; left:0;}
</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 oNewDiv = document.createElement('div');
oNewDiv.style.width=oBox.offsetWidth-10+'px';
oNewDiv.style.height = oBox.offsetHeight-10+'px';
oNewDiv.style.position='absolute';
oNewDiv.style.left = oBox.offsetLeft+'px';
oNewDiv.style.top = oBox.offsetTop+'px';
oNewDiv.style.border='5px dashed #000';
document.body.appendChild(oNewDiv);
document.onmousemove=function(ev){
var oEvent = ev||event;
oNewDiv.style.left = oEvent.clientX-disX+'px';
oNewDiv.style.top = oEvent.clientY-disY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox.style.left = oNewDiv.offsetLeft+'px';
oBox.style.top = oNewDiv.offsetTop+'px';
document.body.removeChild(oNewDiv);
oBox.releaseCapture&&oBox.releaseCapture();
};
oBox.setCapture&&oBox.setCapture();
return false;
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
