拖动一个HTML元素

拖动一个HTML元素

作者：来源：www.28hudong.com 2013-03-30 03:53:27 阅读次我要评论

<script content="text/javascript"> var iMouseDown = false; var dragObject = null; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} // Demo 0 variables var DragDrops = []; var curTarget = null; var lastTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } function getMouseOffset(target, ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; } function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top}; } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseDown(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){ return false; } } function mouseUp(ev){ //dragObject = null; if(dragObject){ ev = ev || window.event; var mousePos = mouseCoords(ev); var dT = dragObject.getAttribute('droptarget'); if(dT){ var targObj = document.getElementById(dT); var objPos = getPosition(targObj); if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){ var nSrc = targObj.getAttribute('newSrc'); if(nSrc){ dragObject.src = nSrc; setTimeout(function(){ if(!dragObject || !dragObject.parentNode) return; dragObject.parentNode.removeChild(dragObject); dragObject = null; }, parseInt(targObj.getAttribute('timeout'))); } else { dragObject.parentNode.removeChild(dragObject); } } } } dragObject = null; iMouseDown = false; } function mouseMove(ev){ ev = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false; } function addDropTarget(item, target){ item.setAttribute('droptarget', target); } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function (){ makeDraggable(document.getElementById('DragImage9')); makeDraggable(document.getElementById('DragImage10')); makeDraggable(document.getElementById('DragImage11')); makeDraggable(document.getElementById('DragImage12')); addDropTarget(document.getElementById('DragImage9'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); } </script> </head> <body> <fieldset id="Demo6" style="height: 70px"><h3>Demo - Drag any of the images</h3> <img id="TrashImage1" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_trash.gif" /> <img id="DragImage9" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_spade.gif" /> <img id="DragImage10" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_heart.gif" /> <img id="DragImage11" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_diamond.gif" /> <img id="DragImage12" src="http://www.cnlei.org/codes/javascript/js-drag-drop/images/drag_drop_club.gif" /> </fieldset>

　　推荐阅读

　　弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。

iPop Demo iPop Demo This is a demo of the image popup script. I know you want to see it in action. Testing things with a small image. The popups have been setup w>>>详细阅读

本文标题：拖动一个HTML元素

地址：http://www.17bianji.com/kaifa2/JS/31236.html

关键词：探索发现

乐购科技部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与乐购科技进行文章共享合作。

网友点评

自媒体专栏

评论

热度

精彩导读

栏目ID=71的表不存在(操作类型=0)

科技快报

品牌展示