拖拽实践

chinmo 我知道是兼容ff的但他的具体作用我还不理解
对于我3的理解正确的我不知道应该是怎样请指点

再回chinmo兄我印象里好像想要用offset定位那么div必须得是绝对定位的吧

1.鼠标还可能跑到浏览器外!
2.由于需要释放选择,或者说是清除,如果是用阻止默认动作就会在某些操作的时候导致mouseup丢失.所以这里选择了window.getSelection && window.getSelection().removeAllRanges();

lz那个跟我那个差很远啊
尤其是move的部分
给我那个例子你参考吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <style>
  #oContent{
    border: 3px solid #000033;
    height: 400px;
    width: 200px;
position:relative;
  }
  #oDiv{
    width: 40px;
    height: 40px;
    background-color:#993333;
    z-index: 100;
    position: absolute;  }
  </style>
  <script language="JavaScript">
  
  </script>
</head> <body>
<div id="oContent">
<div id="oDiv"></div>
</div>
<script>
  new Drag("oDiv","oDiv",{Limit : true, mxContainer: $("oContent")});
</script>
</body>
</html>

定位才有可能和position属性扯上关系如果只是取值,就和position属性没有什么关系了

谢谢你的程序，不好意思其实看完之后大部分思路我还是懂但我认为还是那几个细节就是限制范围判断this.mxLeft = this.mxTop = 0;为什么是0？？

我来一次总的:1.addEventHandler(this.oDrag, "mousedown", function(e){oThis.mouseDown(e || window.event)})的时候
  为什么不能直接addEventHandler(this.oDrag, "mousedown", this.mouseDown),此时this指向哪？
答:这里要清楚你的鼠标可能出了浏览器之外
2.window.getSelection && window.getSelection().removeAllRanges();你博客写的是清除选择，我感觉挺模糊。
  但我如果不加这句话，在ff下一甩鼠标就丢失事件了，请你详细解释下。
答:因为你拖放的时候有一个选择的,这里是清楚选择,这么写是为了兼容FF.如果是用阻止默认动作就会在某些操作的时候导致mouseup丢失,所以引用了这个
3.关于范围限制，我看你的最大范围，最小范围默认都是0，为什么是这样？我的理解是：
  最大右范围 = 容器的offsetLeft + offsetWidth;
  最小左范围 = 容器的offsetLeft
  最大下范围 = 容器的offsetTop + offsetHeight;
  最小上范围 = 容器的offsetTop
  所以我就写了我那块限制范围的代码，但没有实现我想要的。
答:他这个是范围限制,你最多不是都距离到0吗?当然你也可以为负的!设置为0是防止出现滚动条
4.要想用offset取位置是不是容器div和拖拽div的position属性都应该是absolute?
答:取值和position属性没有关系,只有定位的时候才有关系

因为这里
  #oContent{
    border: 3px solid #000033;
    height: 400px;
    width: 200px;
    position:relative;
  }注意是position:relative;不是absolute
那么里面的drag的left和top就是相对oContent来说的了
明白？

谢谢chinmo兄的回复，但我写几点疑问
1.我想addEventHandler事件绑定是mousedown而且我是绑定在拖拽div上，所以是与浏览器外无关的吧，只要是直接this.mouseDown,this的
引用发生了改变，会抛错2.3.我在想为什么是0，想想offset取位置是不是相对父控件的？比如我那拖拽div取位置是相对容器div所以是0就可以？4.恩，那就是我的意思，但我想问下relative和absolute具体是什么区别？明天加分结贴

谢谢cloud刚才的回复，relative和absolute理解错了我！

清除选择的作用是
例如drag里面有一个字a
你用光标选择了这个a（例如全选）
如果没有清除选择然后拖动drag里面的a
lz可以试试

刚才的程序漏了
if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}有这个ff中才正常

1.3.晕,不是说了吗?这个数字不是死的,你可以自己定啊!你定什么范围他就只能到那范围!到0的话是他可以与他相对的父对象或者当前位置可以边重叠4.position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。怎么样才能让他的提示在标题下面呢！那就需要相对定义标题（父级）==Relative，CSS中的写法是：position:relative 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。这样我们就可以对于这个例题总结一句话：用了position:absolute;他的父级标签就一定要用position:relative; absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性，原有float属性将失效；
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。absolute是相对于父对象定位，relative是相对于当前位置定位*/

还有cloud兄你给我的代码ff似乎不行

哦
window.getSelection && window.getSelection().removeAllRanges(); 作用看出来了不然有字就把字拖出来啦

看了下cloud的程序也是，就是当你限定范围后，当鼠标移动到范围之外还可以拖动，这样应不应该考虑？

cloud你可以把我的第一个问题解释下么？

个人觉得只要drag的移动还在范围内就ok
而且感觉这样更炫

哈哈  有道理帮我解答下第一个问题还有就是我把 window.getSelection && window.getSelection().removeAllRanges();
放在mousedown里了  感觉没有什么意外你说放在mousedown里有道理么？还有我没考虑边框好像没感觉异常
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <style>
  #oContent{
border: 3px solid #000033;
height: 400px;
width: 200px;
position:relative;
  }
  #oDiv{
width: 40px;
height: 40px;
background-color:#993333;
z-index: 100;
position: absolute;  }
  </style>
  <script language="JavaScript">
  
  </script>
</head> <body>
<div id="oContent">
<div id="oDiv">drag</div>
</div>
<script>
  new Drag("oContent","oDiv",{limit : true});
</script>
</body>
</html>

1.addEventHandler(this.oDrag, "mousedown", function(e){oThis.mouseDown(e || window.event)})的时候
为什么不能直接addEventHandler(this.oDrag, "mousedown", this.mouseDown),此时this指向哪？这个就跟this的使用有关了
可以参考JavaScript中this关键字使用方法详解的用DOM方式在事件处理函数中使用this关键字部分（这篇文章不错，值得看看）意思就是在使用addEventListener绑定事件后
事件里面的this已经是window对象了
所以用了个oThis

还有就是我把 window.getSelection && window.getSelection().removeAllRanges();
放在mousedown里了感觉没有什么意外你说放在mousedown里有道理么？还有我没考虑边框好像没感觉异常因为move的时候也是可以ctrl+a全选的
所以最好move的时候也释放掉，这样就万无一失了

恩 ok了谢谢chinmo，cloud回复今天不能加分，先一人50，明天再给clou兄追加100

解决方案 »