推荐:怎么用javascript进行拖拽（2）

你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里． 在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．

(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值．在MSIE下ev是空的，所以ev将设置为window.event.

因为我们在这篇文章中需要多次获取鼠标坐标，所以我们设计了mouseCoords这个函数，它只包含了一个参数，就是the event.

我们需要运行在MSIE与Firefox为首的其他浏览器下．Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置．如果你有一个500*500的窗口，而且你的鼠标在正中间，那么paegX和pageY将是250，当你将页面往下滚动500px，那么pageY将是750.此时pageX不变，还是250.

MSIE和这个相反，MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置，并不是文档．当我们有一个500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化．想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性．最后，由于MSIE并没有0,0的文档起始位置，因为通常会设置2px的边框在周围，边框的宽度包含在document.body.clientLeft与clientTop这两个属性中，我们再加入这些到鼠标的位置中．

很幸运，这样mouseCoords函数就完成了，我们不再为坐标的事操心了．

捕捉鼠标点击

下次我们将知道鼠标何时点击与何时放开．如果我们跳过这一步，我们在做拖拽时将永远不知道鼠标移动上面时的动作，这将是恼人的与违反直觉的．

这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove，这样看起来很象我们会获取document.onmousedown与document.onmouseup．但是当我们获取document.onmousedown时，我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性，所以我们设置函数来获取我们需要移动的对象．

运行代码框
<script>function mouseDown(ev){ ev         = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){  return false; }}function makeClickable(item){ if(!item) return; item.onmousedown = function(ev){  document.getElementById('ClickImage').value = this.name; }}document.onmousedown = mouseDown;window.onload = function(){ makeClickable(document.getElementById('ClickImage1')); makeClickable(document.getElementById('ClickImage2')); makeClickable(document.getElementById('ClickImage3')); makeClickable(document.getElementById('ClickImage4'));}</script><FIELDSET id=Demo3><h3>  Demo - Click any image</h3><IMG id=ClickImage1 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951964.gif" name=Spade><IMG id=ClickImage2 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951595.gif" name=Heart><IMG id=ClickImage3 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951331.gif" name=Diamond><IMG id=ClickImage4 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203952145.gif" name=Club> <BR>You clicked on: <INPUT id=ClickImage type="text"> </FIELDSET>