javascript 模仿windows拖动封装类代码,CSharp代码库,德仔网

代码语言
代码分类
【CSharp】 javascript 模仿windows拖动封装类
作者:CSDN / 发布于2012/1/11/ 798
<div>javascript 模仿windows拖动 封装类
<span style="color: rgb(0,128,0)">/*</span><span style="color: rgb(0,128,0)">*
* CreateDate 2011-8-22 18:34:34
*
* @type Javascript Document
*
* Description of moveElement.class
*
* @example drop.reg("span","div");
*
</span><span style="color: rgb(0,128,0)">*/</span><span style="color: rgb(0,0,0)">
</span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> drop</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">{
 reg: </span><span style="color: rgb(0,0,255)">function</span><span style="color: rgb(0,0,0)"> (handler, movediv, cursor) { </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 注册鼠标移动的一些事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> isclick </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">false</span><span style="color: rgb(0,0,0)">;
 </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> clickleft </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">0</span><span style="color: rgb(0,0,0)">;
 </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> clicktop </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">0</span><span style="color: rgb(0,0,0)">;
 </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> target </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">this</span><span style="color: rgb(0,0,0)">.$(handler);
 </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> movediv </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">this</span><span style="color: rgb(0,0,0)">.$(movediv);
 movediv.style.position</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">absolute</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;
 target.style.cursor </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> cursor </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;
 </span><span style="color: rgb(0,0,255)">function</span><span style="color: rgb(0,0,0)"> clickdrop(e) { </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 按下鼠标左键时的事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> e </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> window.event </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> e; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 获取当前事件对象。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> tag</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">document.createElement(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">div</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">)
 tag.id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;
 tag.style.width</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.width;
 tag.style.height</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.height;
 tag.style.position</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">absolute</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;
 tag.style.left</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.left;
 tag.style.top</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.top;
 document.getElementsByTagName(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">body</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">)[</span><span style="color: rgb(0,0,0)">0</span><span style="color: rgb(0,0,0)">].appendChild(tag);
 isclick </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">true</span><span style="color: rgb(0,0,0)">; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 记录已经准备开始移动了。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> clickleft </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientX </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> parseInt(movediv.style.left); </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 记录当前坐标轴。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> clicktop </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientY </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> parseInt(movediv.style.top);
 }
 </span><span style="color: rgb(0,0,255)">function</span><span style="color: rgb(0,0,0)"> startdrop(e) { </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 鼠标开始移动时的事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> e </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> window.event </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> e; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 获取当前事件对象。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)"> (</span><span style="color: rgb(0,0,0)">!</span><span style="color: rgb(0,0,0)">isclick) </span><span style="color: rgb(0,0,255)">return</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">false</span><span style="color: rgb(0,0,0)">; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 如果isclick不等于真了返回。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> movediv.style.left</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.left</span><span style="color: rgb(0,0,0)">?</span><span style="color: rgb(0,0,0)">movediv.style.left:</span><span style="color: rgb(0,0,0)">1</span><span style="color: rgb(0,0,0)">;
 movediv.style.top</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">movediv.style.top</span><span style="color: rgb(0,0,0)">?</span><span style="color: rgb(0,0,0)">movediv.style.top:</span><span style="color: rgb(0,0,0)">1</span><span style="color: rgb(0,0,0)">;
 document.getElementById(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">).style.border</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">1px dotted #000000</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">
 document.getElementById(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">).style.left </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientX </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> clickleft </span><span style="color: rgb(0,0,0)">+</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">px</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">
 document.getElementById(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">).style.top</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientY </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> clicktop </span><span style="color: rgb(0,0,0)">+</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">px</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;

 }
 </span><span style="color: rgb(0,0,255)">function</span><span style="color: rgb(0,0,0)"> endrop(e) { </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 释放鼠标左键时的事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> e </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> window.event </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> e;
 </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)"> (isclick) { </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 如果isclick还为真那么就赋值为假。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> movediv.style.left </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientX </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> clickleft </span><span style="color: rgb(0,0,0)">+</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">px</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 把鼠标当前移动的位置赋值给div</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> movediv.style.top </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> e.clientY </span><span style="color: rgb(0,0,0)">-</span><span style="color: rgb(0,0,0)"> clicktop </span><span style="color: rgb(0,0,0)">+</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">px</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 当前位置减去开始位置就是层当前存放的位置。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> document.getElementsByTagName(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">body</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">)[</span><span style="color: rgb(0,0,0)">0</span><span style="color: rgb(0,0,0)">].removeChild(document.getElementById(</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">move</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">))
 </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)"> (</span><span style="color: rgb(0,0,255)">this</span><span style="color: rgb(0,0,0)">.isIE) movediv.releaseCapture(); </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)">该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> isclick </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">false</span><span style="color: rgb(0,0,0)">;
 document.documentElement.onmousemove </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">null</span><span style="color: rgb(0,0,0)">;
 }
 }
 target.onmouseover</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> clickdrop;
 target.onmousedown </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> clickdrop; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 鼠标按下事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> document.onmouseup </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> endrop; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 鼠标释放事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)">
 document.onmousemove </span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)"> startdrop; </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 鼠标移动事件。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> movediv.onselectstart = movediv.oncontextmenu = function () { return false; }; // 禁止选择和右键菜单。</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> },
 isIE: (navigator.appName </span><span style="color: rgb(0,0,0)">==</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">Microsoft Internet Explorer</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">) </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> window.ActiveXObject, </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> 判断是否为IE。,</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> $:</span><span style="color: rgb(0,0,255)">function</span><span style="color: rgb(0,0,0)"> (objectId)</span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)">获取id的函数</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> {
 </span><span style="color: rgb(0,0,255)">var</span><span style="color: rgb(0,0,0)"> id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,255)">null</span><span style="color: rgb(0,0,0)">;
 </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)">(document.getElementById </span><span style="color: rgb(0,0,0)">&&</span><span style="color: rgb(0,0,0)"> document.getElementById(objectId)) {
 </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> W3C DOM</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">document.getElementById(objectId);
 } </span><span style="color: rgb(0,0,255)">else</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)"> (document.all </span><span style="color: rgb(0,0,0)">&&</span><span style="color: rgb(0,0,0)"> document.all(objectId)) {
 </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> MSIE 4 DOM</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">document.all(objectId);
 } </span><span style="color: rgb(0,0,255)">else</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,255)">if</span><span style="color: rgb(0,0,0)"> (document.layers </span><span style="color: rgb(0,0,0)">&&</span><span style="color: rgb(0,0,0)"> document.layers[objectId]) {
 </span><span style="color: rgb(0,128,0)">//</span><span style="color: rgb(0,128,0)"> NN 4 DOM.. note: var won't find nested layers</span><span style="color: rgb(0,128,0)">
</span><span style="color: rgb(0,0,0)"> id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">document.layers[objectId];
 } </span><span style="color: rgb(0,0,255)">else</span><span style="color: rgb(0,0,0)"> {
 id</span><span style="color: rgb(0,0,0)">=</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">undefind</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">;
 }
 </span><span style="color: rgb(0,0,255)">return</span><span style="color: rgb(0,0,0)"> (id</span><span style="color: rgb(0,0,0)">==</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">undefined</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)"> </span><span style="color: rgb(0,0,0)">||</span><span style="color: rgb(0,0,0)"> id</span><span style="color: rgb(0,0,0)">==</span><span style="color: rgb(0,0,255)">null</span><span style="color: rgb(0,0,0)">)</span><span style="color: rgb(0,0,0)">?</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">\u672a能获取节点</span><span style="color: rgb(0,0,0)">"</span><span style="color: rgb(0,0,0)">:id;
 }
 }
</span></div>
试试其它关键字
　模仿windows拖动　
同语言下
可能有用的
CSDN贡献的其它代码(27)