jQuery可以拖动的差异实现代码脚本之家修正版

当然，代码使用起来也非常的方便，很多东西就不用自己再去琢磨了。研究的过程中顺便用jQuery实现了一个差异的拖动，代码附于本文结尾。实现的思路请参考我的可以拖动的DIV(二)一文。在参考jQuery中文网站中的例子时，我发现他们在差异窗口标题栏触发点击事件时，将差异的位置移上了一些，而鼠标向上的事件注册在整个差异窗口上，这个思路让我很受启发，解决了鼠标移动很快而差异不能跟上导致的错误，非常好的解决办法。另外，请注意事件起泡，在jQuery以及任何实现差异拖动的射流研究…代码中，事件起泡无疑都是要阻止的。在jQuery的约束或者解放方法中，函数的返回值最好都用假的，不信的话，可以试试真的。这个事件起泡的过程在一般代码中我们用停止传播方法来阻止。效果图

注意文中加载了jquery-1.2.6.js复制代码代码如下：script语言='javascript '类型=' text/JAVAScript ' src=' http : jquery-1。2 .6 .js /脚本样式类型='text/css '！车身{背景色： # 333333;} .win { position : absolutetop :0 pxl eft :0 px宽度宽度：300像素宽度：222像素。标题{ height:20px宽度宽度：300像素位置：绝对；背景色： # 666666;float : inherit top :0 pxl eft :0 px背景-图片：网址(BGO。gif)；} .winCon { height:200px宽度宽度：298像素位置：绝对；border:solid边框宽度：1 px边框颜色： # 666666;边框-top :无；float : inherit left :0 pxtop :20 px }/style a href=' # ' onclick=' AddDiv(这是ASD ')；'" asgfsdg/a href=' # ' id=' zxca ' onclick=' AddDiv(这是zxc’)；" asgfsdg/a脚本语言=' JavaScript '类型=' text/JavaScript '函数addDiv(元素，字符串){ $(document.body).追加(' div class=' win ' id=' win ' str ' ' div class=' title ' id=' str ' '/div div class=' winCon ' asfsdgfsdgsd/div/div))；$("#"字符串)。鼠标向下(函数（事件){ var offset=$(this)).offset()；_ x=事件。客户端x偏移。向左；_ y=事件。客户20-偏置。顶部；$(“# win”字符串)。CSS({ ' top ' :偏移量。top-20 ' px ' })；$(“# win”字符串)。鼠标移动(函数（事件){ _ xx=事件。客户端x-_ x；_ YY=事件。client y-_ y；这个。风格。left=_ xx ' px这个。风格。top=_ YY ' px '；这个。风格。zindex=' 100返回false })；返回false })；$(“# win”字符串)。mouseup(function(){ $(this)).解除绑定(“鼠标移动”)；$(这个)。CSS({ ' z-index ' : '-1 " })；返回false })；元素。removeeventlistener(' click '，true)；}/脚本