javascript的拖放入门(2)_建站学-个人建站指南,网页制作,网站设计,网站制作教程

进一步改进，不使用mouseup事件，这样就减少了错过mouseup事件带来的鼠标粘着卡壳的问题。但由于标准浏览器不会自动切换e.button和e.which的值，我被迫动用一个功能键Shirt来停止鼠标拖拽。

var Drag = function(id){ 
  var el = document.getElementById(id); 
  el.style.position = "absolute"; 
  var drag = function(e){ 
    var e = e || window.event, 
    button = e.button || e.which; 
    if(button == 1 && e.shiftKey == false){ 
      el.style.cursor = "pointer"; 
        !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges(); 
      el.style.left = e.clientX - el.offset_x  + "px"; 
      el.style.top = e.clientY - el.offset_y  + "px"; 
      el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10); 
    }else { 
      document.onmousemove = null; 
    } 
  } 
  var dragstart = function(e){ 
    e = e || window.event; 
    el.offset_x = e.clientX - el.offsetLeft; 
    el.offset_y = e.clientY - el.offsetTop; 
    el.style.zIndex = ++Drag.z; 
    document.onmousemove = drag; 
    return false; 
  } 
  Drag.z = 999; 
  el.onmousedown = dragstart; 
}

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
#drag {width:100px;height:100px;background:red;z-index:200;}
</style>
<script type="text/javascript">
var Drag = function(id){
var el = document.getElementById(id);
el.style.position = "absolute";
var drag = function(e){
var e = e || window.event,
button = e.button || e.which;
if(button == 1 && e.shiftKey == false){
el.style.cursor = "pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
el.style.left = e.clientX - el.offset_x  + "px";
el.style.top = e.clientY - el.offset_y  + "px";
el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10);
}else {
document.onmousemove = null;
}
}
var dragstart = function(e){
e = e || window.event;
el.offset_x = e.clientX - el.offsetLeft;
el.offset_y = e.clientY - el.offsetTop;
el.style.zIndex = ++Drag.z;
document.onmousemove = drag;
return false;
}
Drag.z = 999;
el.onmousedown = dragstart;
}
window.onload = function(){
new Drag("drag1");
new Drag("drag2");
new Drag("drag3");
new Drag("drag4");
};
</script>
<title>Drag and Drop</title>
</head>
<body>
//将拖动的距离加到原来的top与left上，以实现位移
<p>拖动时可能被选中的文本……………………</p>
<div id="drag1"  style="top:100px;position:absolute;width:100px;height:100px;background:#F0F"></div>
<div id="drag2" style="top:150px;position:absolute;width:100px;height:100px;background:#F00"></div>
<div id="drag3" style="left:100px;position:absolute;width:100px;height:100px;background:#0F0"></div>
<div id="drag4" style="left:150px;position:absolute;width:100px;height:100px;background:#00F"></div>
<table class="filement_table">
<thead>
<tr>
<th>nodeType</th>
<th>
</th>
<th>
nodeName
</th>
<th>
nodeValue
</th>
<th>
attributes
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Element</td>
<td>tagName大写</td>
<td>null</td>
<td>NamedNodeMap</td>
</tr>
<tr>
<td>2</td>
<td>Attr</td>
<td>name of attribute小写</td>
<td>value of attribute</td>
<td>null</td>
</tr>
<tr>
<td>3</td>
<td>Text</td>
<td>#text</td>
<td>content of the text node</td>
<td>null</td>
</tr>
<tr>
<td>4</td>
<td>CDATASection</td>
<td>#cdata-section</td>
<td>content of the CDATA Section</td>
<td>null</td>
</tr>
<tr>
<td>5</td>
<td>EntityReference</td>
<td>name of entity referenced</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>6</td>
<td>Entity</td>
<td>entity name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>7</td>
<td>ProcessingInstruction</td>
<td>target</td>
<td>entire content excluding the target</td>
<td>null</td>
</tr>
<tr>
<td>8</td>
<td>Comment</td>
<td>#comment</td>
<td>content of the comment</td>
<td>null</td>
</tr>
<tr>
<td>9</td>
<td>Document</td>
<td>#document</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>10</td>
<td>DocumentType</td>
<td>document type name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>11</td>
<td>DocumentFragment</td>
<td>#document-fragment</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>12</td>
<td>Notation</td>
<td>notation name</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
</table>
</body>
</html>

虽然不绑定mouseup的确在IE爽到high起，但在火狐等浏览要多按一个键才能终止拖动，怎么说也对用户体验造成影响，因此当一种知识学学就算了。我们还是选择方案2。

接着下来我们为方案扩展一下功能。首先范围拖动，就是存在一个让它在上面拖动的容器。如果存在容器，我们就取得其容器的四个点的坐标，与拖动元素的四个点的坐标比较，从而修正top与left。由于我已经实现了getCoords函数，取得页面上某一点的坐标易如反掌。同时这样做，我们就不用把此容器设置成offsetParent。总之，多一事不如少一事。

var getCoords = function(el){ 
  var box = el.getBoundingClientRect(), 
  doc = el.ownerDocument, 
  body = doc.body, 
  html = doc.documentElement, 
  clientTop = html.clientTop || body.clientTop || 0, 
  clientLeft = html.clientLeft || body.clientLeft || 0, 
  top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop, 
  left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft 
  return { 'top': top, 'left': left }; 
};

接着我们要取得容器的四个点的坐标：

_cCoords = getCoords(container), 
_cLeft = _cCoords.left, 
_cTop = _cCoords.top, 
_cRight = _cLeft + container.clientWidth, 
_cBottom = _cTop + container.clientHeight;

接着是拖动元素的四个点的坐标：

var _left = el.offsetLeft, 
_top = el.offsetTop, 
_right = _left + el.offsetWidth, 
_bottom = _top + el.offsetHeight,

但是这样取得的是没有拖动前的坐标，拖动时的坐标在上面的方案2也已给出了：

1.var _left = e.clientX - el.offset_x, 
2._top = e.clientY - el.offset_y,

修正坐标很简单，如果拖动元素在左边或上边超出容器，就让拖动元素的top与left取容器的_cLeft或_cTop值，如果从右边超出容器，我们用_cRight减去容器的宽度再赋给拖动元素的top，下边的处理相仿。

if(_left < _cLeft){ 
  _left = _cLeft 
} 
if(_top < _cTop){ 
  _top = _cTop 
} 
if(_right > _cRight){ 
  _left = _cRight - el.offsetWidth; 
} 
if(_bottom > _cBottom){ 
  _top = _cBottom - el.offsetHeight; 
} 
el.style.left = _left  + "px"; 
el.style.top = _top  + "px";

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
.drag {width:100px;height:100px;z-index:200;}
#drag1 {background:red}
#drag2 {background:#E8D098;}
#drag3 {background:#fff;}
#drag4 {background:#E8FFE8;}
#drag5 {background:#ff0;}
#drag6 {background:#66c;}
#parent {width:300px;height:300px;background:blue;}
</style>
<script type="text/javascript">
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
var Drag = function(id){
var el = document.getElementById(id),
options  = arguments[1] || {},
container = options.container || document.documentElement,
limit = false || options.limit;
el.style.position = "absolute";
var drag = function(e) {
e = e || window.event;
el.style.cursor = "pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
var _left = e.clientX - el.offset_x,
_top = e.clientY - el.offset_y;
if(limit){
var _right = _left + el.offsetWidth,
_bottom = _top + el.offsetHeight,
_cCoords = getCoords(container),
_cLeft = _cCoords.left,
_cTop = _cCoords.top,
_cRight = _cLeft + container.clientWidth,
_cBottom = _cTop + container.clientHeight;
if(_left < _cLeft){
_left = _cLeft
}
if(_top < _cTop){
_top = _cTop
}
if(_right > _cRight){
_left = _cRight - el.offsetWidth;
}
if(_bottom > _cBottom){
_top = _cBottom - el.offsetHeight;
}
}
el.style.left = _left  + "px";
el.style.top = _top  + "px";
el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10);
}
var dragend = function(){
document.onmouseup = null;
document.onmousemove = null;
}
var dragstart = function(e){
e = e || window.event;
el.offset_x = e.clientX - el.offsetLeft;
el.offset_y = e.clientY - el.offsetTop;
document.onmouseup = dragend;
document.onmousemove = drag;
el.style.zIndex = ++Drag.z;
return false;
}
Drag.z = 999;
el.onmousedown = dragstart;
}
window.onload = function(){
var p = document.getElementById("parent");
new Drag("drag1",{container:p,limit:true});
new Drag("drag2",{container:p,limit:true});
new Drag("drag3",{container:p,limit:true});
new Drag("drag4",{container:p,limit:true});
new Drag("drag5",{container:p,limit:true});
new Drag("drag6",{container:p,limit:true});
};
</script>
<title>拖动</title>
</head>
<body id="body">
<div id="parent">
<p>拖动时可能被选中的文本……………………</p>
<div id="drag1" class="drag"></div>
<div id="drag2" class="drag"></div>
<div id="drag3" class="drag"></div>
<div id="drag4" class="drag"></div>
<div id="drag5" class="drag"></div>
<div id="drag6" class="drag"></div>
</div>
</body>
</html>

水平锁定与垂直锁直也是两个很常用的功能，我们也来实现它。原理很简单，在开始拖动时就把top与left保存起来，待到拖动时再赋给它就行了。代码请直接看运行框的代码：

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
.drag {width:100px;height:100px;z-index:200;}
#drag1 {background:red}
#drag2 {background:#E8D098;}
#drag3 {background:#fff;}
#drag4 {background:#E8FFE8;}
#drag5 {background:#ff0;}
#drag6 {background:#66c;}
#parent {width:300px;height:300px;background:blue;}
</style>
<script type="text/javascript">
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
var Drag = function(id){
var el = document.getElementById(id),
options  = arguments[1] || {},
container = options.container || document.documentElement,
limit = false || options.limit,
lockX = false || options.lockX,
lockY = false || options.lockY;
el.style.position = "absolute";
var drag = function(e) {
e = e || window.event;
el.style.cursor = "pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
var _left = e.clientX - el.offset_x,
_top = e.clientY - el.offset_y;
if(limit){
var _right = _left + el.offsetWidth,
_bottom = _top + el.offsetHeight,
_cCoords = getCoords(container),
_cLeft = _cCoords.left,
_cTop = _cCoords.top,
_cRight = _cLeft + container.clientWidth,
_cBottom = _cTop + container.clientHeight;
_left = Math.max(_left, _cLeft);
_top = Math.max(_top, _cTop);
if(_right > _cRight){
_left = _cRight - el.offsetWidth;
}
if(_bottom > _cBottom){
_top = _cBottom - el.offsetHeight;
}
}
if(lockX){
_left = el.lockX;
}
if(lockY){
_top = el.lockY;
}
el.style.left = _left  + "px";
el.style.top = _top  + "px";
el.innerHTML = parseInt(el.style.left,10)+ " x "+parseInt(el.style.top,10);
}
var dragend = function(){
document.onmouseup = null;
document.onmousemove = null;
}
var dragstart = function(e){
e = e || window.event;
if(lockX){
el.lockX = getCoords(el).left;
}
if(lockY){
el.lockY = getCoords(el).top;
}
if(/a/[-1]=='a'){
el.offset_x = e.layerX
el.offset_y = e.layerY
}else{
el.offset_x = e.offsetX
el.offset_y = e.offsetY
}
document.onmouseup = dragend;
document.onmousemove = drag;
el.style.zIndex = ++Drag.z;
return false;
}
Drag.z = 999;
el.onmousedown = dragstart;
}
window.onload = function(){
var p = document.getElementById("parent");
new Drag("drag1",{container:p,limit:true,lockX:true});
new Drag("drag2",{container:p,limit:true,lockY:true});
new Drag("drag3",{container:p,limit:true});
new Drag("drag4",{container:p,limit:true});
new Drag("drag5",{container:p,limit:true});
new Drag("drag6",{container:p,limit:true});
};
</script>
<title>拖动</title>
</head>
<body id="body">
<p>拖动时可能被选中的文本……………………</p>
<div id="parent">
<div id="drag1" class="drag"></div>
<div id="drag2" class="drag"></div>
<div id="drag3" class="drag"></div>
<div id="drag4" class="drag"></div>
<div id="drag5" class="drag"></div>
<div id="drag6" class="drag"></div>
</div>
</body>
</html>

(责任编辑：admin)

搜索

热门标签:

javascript的拖放入门(2)