中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

運(yùn)行代碼框
<script> Number.prototype.NaN0=function(){return isNaN(this)?0:this;} var iMouseDown = false; var dragObject = null; var curTarget = 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; 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; } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function() { makeDraggable(document.getElementById('DragImage5')); makeDraggable(document.getElementById('DragImage6')); makeDraggable(document.getElementById('DragImage7')); makeDraggable(document.getElementById('DragImage8')); } </script> <FIELDSET id=Demo5 style="HEIGHT: 70px"><h3>Demo - Drag any of the images</h3><IMG id=DragImage5 src="/articleimg/2006/07/3791/drag_drop_spade.gif"><IMG id=DragImage6 src="/articleimg/2006/07/3791/drag_drop_heart.gif"><IMG id=DragImage7 src="/articleimg/2006/07/3791/drag_drop_diamond.gif"><IMG id=DragImage8 src="/articleimg/2006/07/3791/drag_drop_club.gif"> </FIELDSET>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

你會(huì)注意到這個(gè)代碼幾乎是前面的全集，將前面的合在一起就實(shí)現(xiàn)了拖拽效果了．

當(dāng)我們點(diǎn)擊一個(gè)item時(shí)，我們就獲取了很多變量，如鼠標(biāo)位置，鼠標(biāo)位置自然就包含了那個(gè)item的坐標(biāo)信息了．如果我們點(diǎn)擊了一個(gè)20*20px圖像的正中間，那么鼠標(biāo)的相對(duì)坐標(biāo)為{x:10,y:10}．當(dāng)我們點(diǎn)擊這個(gè)圖像的左上角那么鼠標(biāo)的相對(duì)坐標(biāo)為{x:0,y:0}.當(dāng)我們點(diǎn)擊時(shí)，我們用這個(gè)方法取得一些鼠標(biāo)與圖片校對(duì)的信息．如果我們不能加載頁面item，那么信息將是document信息，會(huì)忽略了點(diǎn)擊的item信息．

mouseOffset函數(shù)使用了另一個(gè)函數(shù)getPosition.getPosition的作用是返回item相對(duì)頁面左上角的坐標(biāo)，如果我們嘗試獲取item.offsetLeft或者item.style.left，那么我們將取得item相對(duì)與父級(jí)的位置，不是整個(gè)document．所有的腳本我們都是相對(duì)整個(gè)document，這樣會(huì)更好一些．

為了完成getPosition任務(wù)，必須循環(huán)取得item的父級(jí)，我們將加載內(nèi)容到item的左／上的位置．我們需要管理想要的top與left列表．

自從定義了mousemove這個(gè)函數(shù)，mouseMove就會(huì)一直運(yùn)行．第一我們確定item的style.position為absolute，第二我們移動(dòng)item到前面定義好的位置．當(dāng)mouse點(diǎn)擊被釋放，dragObject被設(shè)置為null，mouseMove將不在做任何事．

Dropping an Item

前面的例子目的很簡(jiǎn)單，就是拖拽item到我們希望到的地方．我們經(jīng)常還有其他目的如刪除item，比如我們可以將item拖到垃圾桶里，或者其他頁面定義的位置．

很不幸，我們有一個(gè)很大的難題，當(dāng)我們拖拽，item會(huì)在鼠標(biāo)之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我們拖拽一個(gè)item到垃圾桶上，鼠標(biāo)信息還在item上，不在垃圾桶上．

怎么解決這個(gè)問題呢？有幾個(gè)方法可以來解決．第一，這是以前比較推薦的，我們?cè)谝苿?dòng)鼠標(biāo)時(shí)item會(huì)跟隨鼠標(biāo)，并占用了mouseover/mousemove等鼠標(biāo)事件，我們不這樣做，只是讓item跟隨著鼠標(biāo)，并不占用mouseover等鼠標(biāo)事件，這樣會(huì)解決問題，但是這樣并不好看，我們還是希望item能直接跟在mouse下．

另一個(gè)選擇是不做item的拖拽．你可以改變鼠標(biāo)指針來顯示需要拖拽的item，然后放在鼠標(biāo)釋放的位置．這個(gè)解決方案，也是因?yàn)槊缹W(xué)原因不予接受．

最后的解決方案是，我們并不去除拖拽效果．這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標(biāo)的列表，當(dāng)鼠標(biāo)釋放時(shí)，手工去檢查釋放的位置是否是在目標(biāo)列表位置上，如果在，說明是釋放在目標(biāo)位置上了．

/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = [];

function addDropTarget(dropTarget){
 dropTargets.push(dropTarget);
}

function mouseUp(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);

 for(var i=0; i<dropTargets.length; i++){
  var curTarget  = dropTargets[i];
  var targPos    = getPosition(curTarget);
  var targWidth  = parseInt(curTarget.offsetWidth);
  var targHeight = parseInt(curTarget.offsetHeight);

  if(
   (mousePos.x > targPos.x)                &&

   (mousePos.x < (targPos.x + targWidth))  &&
   (mousePos.y > targPos.y)                &&
   (mousePos.y < (targPos.y + targHeight))){
    // dragObject was dropped onto curTarget!
  }
 }

 dragObject   = null;
}

出處：sohotx.com
責(zé)任編輯：moby

上一頁 怎么用javascript進(jìn)行拖拽 [2] 下一頁 怎么用javascript進(jìn)行拖拽 [4]

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論