JavaScript中通过鼠标事件实现模拟拖放效果

上例【JavaScript中使用zDragDrop实现拖放功能】演示了使用zDragDrop库实现拖放，但是如果不依赖任何库自行开发出拖放效果的话还是有点麻烦的。这里先介绍一种通过鼠标事件实现模拟拖放效果的办法。

 

1.先看如下效果：

Try moving your mouse around.

这个仅仅实现了div跟随鼠标移动的效果。

再看下面的例子：

Try dragging the red square.

运行时发现Div左上角总与鼠标指针对齐。优化一下先：

Try dragging the red square.

这样感觉舒坦一点了。哈哈。

基于以上方法就可以模拟出拖放效果了。请看代码演示：

Try dragging the red square onto the blue square.

 

注意，上面用的js库eventutil.js代码：

var EventUtil = new Object; EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; EventUtil.formatEvent = function (oEvent) { if (typeof oEvent.charCode == "undefined") { oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; oEvent.isChar = (oEvent.charCode > 0); } if (oEvent.srcElement && !oEvent.target) { oEvent.eventPhase = 2; oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; if (!oEvent.preventDefault) { oEvent.preventDefault = function () { this.returnValue = false; }; } if (oEvent.type == "mouseout") { oEvent.relatedTarget = oEvent.toElement; } else if (oEvent.type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } if (!oEvent.stopPropagation) { oEvent.stopPropagation = function () { this.cancelBubble = true; }; } oEvent.target = oEvent.srcElement; oEvent.time = (new Date).getTime(); } return oEvent; }; EventUtil.getEvent = function() { if (window.event) { return this.formatEvent(window.event); } else { return EventUtil.getEvent.caller.arguments[0]; } };