<script language="javascript" type="text/javascript"><br/> <br/>var Demos = [];<br/>var nDemos = 8;<br/>// Demo variables<br/>// iMouseDown represents the current mouse button state: up or down<br/>/*<br/>lMouseState represents the previous mouse button state so that we can<br/>check for button clicks and button releases:<br/>if(iMouseDown && !lMouseState) // button just clicked!<br/>if(!iMouseDown && lMouseState) // button just released!<br/>*/<br/>var mouseOffset = null;<br/>var iMouseDown = false;<br/>var lMouseState = false;<br/>var dragObject = null;<br/>// Demo 0 variables<br/>var DragDrops = [];<br/>var curTarget = null;<br/>var lastTarget = null;<br/>var dragHelper = null;<br/>var tempDiv = null;<br/>var rootParent = null;<br/>var rootSibling = null;<br/>var nImg = new Image();<br/>nImg.src = 'images/drag_drop_poof.gif';<br/>// Demo1 variables<br/>var D1Target = null;<br/>Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br/>function CreateDragContainer(){<br/> /*<br/> Create a new "Container Instance" so that items from one "Set" can not<br/> be dragged into items from another "Set"<br/> */<br/> var cDrag = DragDrops.length;<br/> DragDrops[cDrag] = [];<br/> /*<br/> Each item passed to this function should be a "container". Store each<br/> of these items in our current container<br/> */<br/> for(var i=0; i<arguments.length; i++){<br/> var cObj = arguments[i];<br/> DragDrops[cDrag].push(cObj);<br/> cObj.setAttribute('DropObj', cDrag);<br/> /*<br/> Every top level item in these containers should be draggable. Do this<br/> by setting the DragObj attribute on each item and then later checking<br/> this attribute in the mouseMove function<br/> */<br/> for(var j=0; j<cObj.childNodes.length; j++){<br/> // Firefox puts in lots of #text nodes...skip these<br/> if(cObj.childNodes[j].nodeName=='#text') continue;<br/> cObj.childNodes[j].setAttribute('DragObj', cDrag);<br/> }<br/> }<br/>}<br/>function getPosition(e){<br/> var left = 0;<br/> var top = 0;<br/> while (e.offsetParent){<br/> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br/> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br/> e = e.offsetParent;<br/> }<br/> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br/> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br/> return {x:left, y:top};<br/>}<br/>function mouseCoords(ev){<br/> if(ev.pageX &#124;&#124; ev.pageY){<br/> return {x:ev.pageX, y:ev.pageY};<br/> }<br/> return {<br/> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br/> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br/> };<br/>}<br/>function writeHistory(object, message){<br/> if(!object &#124;&#124; !object.parentNode &#124;&#124; !object.parentNode.getAttribute) return;<br/> var historyDiv = object.parentNode.getAttribute('history');<br/> if(historyDiv){<br/> historyDiv = document.getElementById(historyDiv);<br/> historyDiv.appendChild(document.createTextNode(object.id+': '+message));<br/> historyDiv.appendChild(document.createElement('BR'));<br/> historyDiv.scrollTop += 50;<br/> }<br/>}<br/>function getMouseOffset(target, ev){<br/> ev = ev &#124;&#124; window.event;<br/> var docPos = getPosition(target);<br/> var mousePos = mouseCoords(ev);<br/> return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br/>}<br/>function mouseMove(ev){<br/> ev = ev &#124;&#124; window.event;<br/> /*<br/> We are setting target to whatever item the mouse is currently on<br/> Firefox uses event.target here, MSIE uses event.srcElement<br/> */<br/> var target = ev.target &#124;&#124; ev.srcElement;<br/> var mousePos = mouseCoords(ev);<br/> if(Demos[0] &#124;&#124; Demos[4]){<br/> // mouseOut event - fires if the item the mouse is on has changed<br/> if(lastTarget && (target!==lastTarget)){<br/> writeHistory(lastTarget, 'Mouse Out Fired');<br/> // reset the classname for the target element<br/> var origClass = lastTarget.getAttribute('origClass');<br/> if(origClass) lastTarget.className = origClass;<br/> }<br/> /*<br/> dragObj is the grouping our item is in (set from the createDragContainer function).<br/> if the item is not in a grouping we ignore it since it can't be dragged with this<br/> script.<br/> */<br/> var dragObj = target.getAttribute('DragObj');<br/> // if the mouse was moved over an element that is draggable<br/> if(dragObj!=null){<br/> // mouseOver event - Change the item's class if necessary<br/> if(target!=lastTarget){<br/> writeHistory(target, 'Mouse Over Fired');<br/> var oClass = target.getAttribute('overClass');<br/> if(oClass){<br/> target.setAttribute('origClass', target.className);<br/> target.className = oClass;<br/> }<br/> }<br/> // if the user is just starting to drag the element<br/> if(iMouseDown && !lMouseState){<br/> writeHistory(target, 'Start Dragging');<br/> // mouseDown target<br/> curTarget = target;<br/> // Record the mouse x and y offset for the element<br/> rootParent = curTarget.parentNode;<br/> rootSibling = curTarget.nextSibling;<br/> mouseOffset = getMouseOffset(target, ev);<br/> // We remove anything that is in our dragHelper DIV so we can put a new item in it.<br/> for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);<br/> // Make a copy of the current item and put it in our drag helper.<br/> dragHelper.appendChild(curTarget.cloneNode(true));<br/> dragHelper.style.display = 'block';<br/> // set the class on our helper DIV if necessary<br/> var dragClass = curTarget.getAttribute('dragClass');<br/> if(dragClass){<br/> dragHelper.firstChild.className = dragClass;<br/> }<br/> // disable dragging from our helper DIV (it's already being dragged)<br/> dragHelper.firstChild.removeAttribute('DragObj');<br/> /*<br/> Record the current position of all drag/drop targets related<br/> to the element. We do this here so that we do not have to do<br/> it on the general mouse move event which fires when the mouse<br/> moves even 1 pixel. If we don't do this here the script<br/> would run much slower.<br/> */<br/> var dragConts = DragDrops[dragObj];<br/> /*<br/> first record the width/height of our drag item. Then hide it since<br/> it is going to (potentially) be moved out of its parent.<br/> */<br/> curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));<br/> curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));<br/> curTarget.style.cssText = 'FILTER:alpha(opacity=20);border:1px dotted #ff0000';<br/> // loop through each possible drop container<br/> for(var i=0; i<dragConts.length; i++){<br/> with(dragConts[i]){<br/> var pos = getPosition(dragConts[i]);<br/> /*<br/> save the width, height and position of each container.<br/> Even though we are saving the width and height of each<br/> container back to the container this is much faster because<br/> we are saving the number and do not have to run through<br/> any calculations again. Also, offsetHeight and offsetWidth<br/> are both fairly slow. You would never normally notice any<br/> performance hit from these two functions but our code is<br/> going to be running hundreds of times each second so every<br/> little bit helps!<br/> Note that the biggest performance gain here, by far, comes<br/> from not having to run through the getPosition function<br/> hundreds of times.<br/> */<br/> setAttribute('startWidth', parseInt(offsetWidth));<br/> setAttribute('startHeight', parseInt(offsetHeight));<br/> setAttribute('startLeft', pos.x);<br/> setAttribute('startTop', pos.y);<br/> }<br/> // loop through each child element of each container<br/> for(var j=0; j<dragConts[i].childNodes.length; j++){<br/> with(dragConts[i].childNodes[j]){<br/> if((nodeName=='#text') &#124;&#124; (dragConts[i].childNodes[j]==curTarget)) continue;<br/> var pos = getPosition(dragConts[i].childNodes[j]);<br/> // save the width, height and position of each element<br/> setAttribute('startWidth', parseInt(offsetWidth));<br/> setAttribute('startHeight', parseInt(offsetHeight));<br/> setAttribute('startLeft', pos.x);<br/> setAttribute('startTop', pos.y);<br/> }<br/> }<br/> }<br/> }<br/> }<br/> // If we get in here we are dragging something<br/> if(curTarget){<br/> // move our helper div to wherever the mouse is (adjusted by mouseOffset)<br/> dragHelper.style.top = mousePos.y - mouseOffset.y;<br/> dragHelper.style.left = mousePos.x - mouseOffset.x;<br/> var dragConts = DragDrops[curTarget.getAttribute('DragObj')];<br/> var activeCont = null;<br/> var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);<br/> var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);<br/> // check each drop container to see if our target object is "inside" the container<br/> for(var i=0; i<dragConts.length; i++){<br/> with(dragConts[i]){<br/> if((parseInt(getAttribute('startLeft')) < xPos) &&<br/> (parseInt(getAttribute('startTop')) < yPos) &&<br/> ((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) &&<br/> ((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){<br/> /*<br/> our target is inside of our container so save the container into<br/> the activeCont variable and then exit the loop since we no longer<br/> need to check the rest of the containers<br/> */<br/> activeCont = dragConts[i];<br/> // exit the for loop<br/> break;<br/> }<br/> }<br/> }<br/> // Our target object is in one of our containers. Check to see where our div belongs<br/> if(activeCont){<br/> if(activeCont!=curTarget.parentNode){<br/> writeHistory(curTarget, 'Moved into '+activeCont.id);<br/> }<br/> // beforeNode will hold the first node AFTER where our div belongs<br/> var beforeNode = null;<br/> // loop through each child node (skipping text nodes).<br/> for(var i=activeCont.childNodes.length-1; i>=0; i--){<br/> with(activeCont.childNodes[i]){<br/> if(nodeName=='#text') continue;<br/> // if the current item is "After" the item being dragged<br/> if(curTarget != activeCont.childNodes[i] &&<br/> ((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) &&<br/> ((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){<br/> beforeNode = activeCont.childNodes[i];<br/> }<br/> }<br/> }<br/> // the item being dragged belongs before another item<br/> if(beforeNode){<br/> if(beforeNode!=curTarget.nextSibling){<br/> writeHistory(curTarget, 'Inserted Before '+beforeNode.id);<br/> activeCont.insertBefore(curTarget, beforeNode);<br/> }<br/> // the item being dragged belongs at the end of the current container<br/> } else {<br/> if((curTarget.nextSibling) &#124;&#124; (curTarget.parentNode!=activeCont)){<br/> writeHistory(curTarget, 'Inserted at end of '+activeCont.id);<br/> activeCont.appendChild(curTarget);<br/> }<br/> }<br/> // the timeout is here because the container doesn't "immediately" resize<br/> setTimeout(function(){<br/> var contPos = getPosition(activeCont);<br/> activeCont.setAttribute('startWidth', parseInt(activeCont.offsetWidth));<br/> activeCont.setAttribute('startHeight', parseInt(activeCont.offsetHeight));<br/> activeCont.setAttribute('startLeft', contPos.x);<br/> activeCont.setAttribute('startTop', contPos.y);}, 5);<br/> // make our drag item visible<br/> if(curTarget.style.display!=''){<br/> writeHistory(curTarget, 'Made Visible');<br/> curTarget.style.display = '';<br/> curTarget.style.visibility = 'visible';<br/> }<br/> } else {<br/> // our drag item is not in a container, so hide it.<br/> if(curTarget.style.display!='none'){<br/> writeHistory(curTarget, 'Hidden');<br/> curTarget.style.display = 'none';<br/> }<br/> }<br/> }<br/> // track the current mouse state so we can compare against it next time<br/> lMouseState = iMouseDown;<br/> // mouseMove target<br/> lastTarget = target;<br/> }<br/> if(Demos[2]){<br/> document.getElementById('MouseXPosition').value = mousePos.x;<br/> document.getElementById('MouseYPosition').value = mousePos.y;<br/> }<br/> if(dragObject){<br/> dragObject.style.position = 'absolute';<br/> dragObject.style.top = mousePos.y - mouseOffset.y;<br/> dragObject.style.left = mousePos.x - mouseOffset.x;<br/> }<br/> // track the current mouse state so we can compare against it next time<br/> lMouseState = iMouseDown;<br/> // this prevents items on the page from being highlighted while dragging<br/> if(curTarget &#124;&#124; dragObject) return false;<br/>}<br/>function mouseUp(ev){<br/> if(Demos[0] &#124;&#124; Demos[4]){<br/> if(curTarget){<br/> writeHistory(curTarget, 'Mouse Up Fired');<br/> dragHelper.style.display = 'none';<br/> if(curTarget.style.display == 'none'){<br/> if(rootSibling){<br/> rootParent.insertBefore(curTarget, rootSibling);<br/> } else {<br/> rootParent.appendChild(curTarget);<br/> }<br/> }<br/> curTarget.style.display = '';<br/> curTarget.style.visibility = 'visible';<br/> curTarget.style.cssText = 'FILTER:alpha(opacity=100);border:1px solid #000';<br/> }<br/> curTarget = null;<br/> }<br/> if(Demos[6] && dragObject){<br/> ev = ev &#124;&#124; window.event;<br/> var mousePos = mouseCoords(ev);<br/> var dT = dragObject.getAttribute('droptarget');<br/> if(dT){<br/> var targObj = document.getElementById(dT);<br/> var objPos = getPosition(targObj);<br/> if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){<br/> var nSrc = targObj.getAttribute('newSrc');<br/> if(nSrc){<br/> dragObject.src = nSrc;<br/> setTimeout(function(){<br/> if(!dragObject &#124;&#124; !dragObject.parentNode) return;<br/> dragObject.parentNode.removeChild(dragObject);<br/> dragObject = null;<br/> }, parseInt(targObj.getAttribute('timeout')));<br/> } else {<br/> dragObject.parentNode.removeChild(dragObject);<br/> }<br/> }<br/> }<br/> }<br/> dragObject = null;<br/> iMouseDown = false;<br/>}<br/>function mouseDown(ev){<br/> ev = ev &#124;&#124; window.event;<br/> var target = ev.target &#124;&#124; ev.srcElement;<br/> iMouseDown = true;<br/> if(Demos[0] &#124;&#124; Demos[4]){<br/> if(lastTarget){<br/> writeHistory(lastTarget, 'Mouse Down Fired');<br/> }<br/> }<br/> if(target.onmousedown &#124;&#124; target.getAttribute('DragObj')){<br/> return false;<br/> }<br/>}<br/>function makeDraggable(item){<br/> if(!item) return;<br/> item.onmousedown = function(ev){<br/> dragObject = this;<br/> mouseOffset = getMouseOffset(this, ev);<br/> return false;<br/> }<br/>}<br/>function makeClickable(item){<br/> if(!item) return;<br/> item.onmousedown = function(ev){<br/> document.getElementById('ClickImage').value = this.name;<br/> }<br/>}<br/>function addDropTarget(item, target){<br/> item.setAttribute('droptarget', target);<br/>}<br/>document.onmousemove = mouseMove;<br/>document.onmousedown = mouseDown;<br/>document.onmouseup = mouseUp;<br/>window.onload = function(){<br/> for(var i=0; i<nDemos; i++){<br/> Demos[i] = document.getElementById('Demo'+i);<br/> }<br/> if(Demos[0]){<br/> CreateDragContainer(document.getElementById('DragContainer1'), document.getElementById('DragContainer2'), document.getElementById('DragContainer3'));<br/> CreateDragContainer(document.getElementById('DragContainer7'));<br/> CreateDragContainer(document.getElementById('DragContainer8'));<br/> }<br/> if(Demos[4]){<br/> CreateDragContainer(document.getElementById('DragContainer1'), document.getElementById('DragContainer2'));<br/> }<br/> if(Demos[0] &#124;&#124; Demos[4]){<br/> // Create our helper object that will show the item while dragging<br/> dragHelper = document.createElement('DIV');<br/> dragHelper.style.cssText = 'position:absolute;display:none;';<br/> document.body.appendChild(dragHelper);<br/> }<br/> if(Demos[1]){<br/> makeDraggable(document.getElementById('DragImage1'));<br/> makeDraggable(document.getElementById('DragImage2'));<br/> makeDraggable(document.getElementById('DragImage3'));<br/> makeDraggable(document.getElementById('DragImage4'));<br/> }<br/> if(Demos[5]){<br/> makeDraggable(document.getElementById('DragImage5'));<br/> makeDraggable(document.getElementById('DragImage6'));<br/> makeDraggable(document.getElementById('DragImage7'));<br/> makeDraggable(document.getElementById('DragImage8'));<br/> }<br/> if(Demos[6]){<br/> makeDraggable(document.getElementById('DragImage9'));<br/> makeDraggable(document.getElementById('DragImage10'));<br/> makeDraggable(document.getElementById('DragImage11'));<br/> makeDraggable(document.getElementById('DragImage12'));<br/> addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');<br/> addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');<br/> addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');<br/> addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');<br/> }<br/> if(Demos[3]){<br/> makeClickable(document.getElementById('ClickImage1'));<br/> makeClickable(document.getElementById('ClickImage2'));<br/> makeClickable(document.getElementById('ClickImage3'));<br/> makeClickable(document.getElementById('ClickImage4'));<br/> }<br/>}<br/></script><br/><style><br/>#Demo4{margin-left:14px;}<br/>.DragContainer {float:left;width:360px;margin:5px;padding:5px;}<br/>.OverDragContainer {border:#ccc 2px solid;}<br/>.DragBox {border:#000 1px solid;width:350px;height:auto;background:#eee url(../images/right_title.gif) no-repeat left top;margin-bottom:5px;padding-top:5px;}<br/>.OverDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;}<br/>.DragDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;}<br/>.DragDragBox {FILTER:alpha(opacity=70);background:#eee url(../images/right_title.gif) no-repeat left top;}<br/>.DragBox img{margin-left:10px;}<br/>.DragDragBox img{margin-left:10px;}<br/>.OverDragBox img{margin-left:10px;}<br/>egend {font-weight: bold;font-size:12px;color:#666699; font-family: verdana, tahoma, arial}<br/>fieldset {padding-right:3px;padding-left:3px;padding-bottom:3px;padding-top: 3px}<br/>.content{padding-left:8px;clear:both;height:25px;background:#fff;margin-top:5px;}<br/>.content li{list-style:none;width:75px;line-height:25px;float:left;}<br/>.history{background:#eee;} <br/></style><br/><fieldset id="Demo4"><legend>本页面元素可以随意拖拽</legend><br/><div><br/><div class="DragContainer" id="DragContainer1" overclass="OverDragContainer"><br/> <br/><div class="DragBox" overclass="OverDragBox" dragclass="DragDragBox"><br/>顶级站点<br/><div class="content" id="hot_content"><br/><li><a href="http://www.sohu.com/" target="_blank">搜狐</a></li><br/><li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li><br/></div><br/></div><br/><div class="DragBox" id="Item2" overclass="OverDragBox" dragclass="DragDragBox">Item #2<br /><p>Hello guy!</p></div><br/><div class=DragBox id=Item3 overclass="OverDragBox" dragclass="DragDragBox">Item #3</div><br/><div class=DragBox id=Item4 overclass="OverDragBox" dragclass="DragDragBox">Item #4</div><br/></div><br/> <br/> <br/><div class="DragContainer" id="DragContainer2" overclass="OverDragContainer"><br/><div class="DragBox" id=Item5 overclass="OverDragBox" dragclass="DragDragBox">Item #5</div><br/><div class="DragBox" id=Item6 overclass="OverDragBox" dragclass="DragDragBox">Item #6</div><br/> </div><br/> <br/></div><br/></fieldset>

提示：你可以先修改部分代码再运行。