在线爱免费高清完整版视频 ,大伊香蕉精品二区视频在线

主頁 > 知識庫 > AjaxUI：鼠標拖拽

AjaxUI：鼠標拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <meta content-type="text/html" charset="gb2312"/> <style type="text/css"> body{padding:0px;text-align:center;font:12px Arial;} div.container{width:100px;height:100px;border:1px solid #000;margin:10px auto;} div#main{width:99px;height:99px;border:1px solid #000;background:#050;color:#fff;font:12px Arial;margin:auto;} p{text-algin:left;} </style> <script type="text/javascript"> /********************Mouse類及其方法********************/ //創(chuàng)建鼠標類 var Mouse=new Object(); //獲取鼠標位置 Mouse.getMousePosition=function(event)  {     var event=event || window.event;     if(event.pageX)     {         return {x:event.pageX,y:event.pageY};     }     else     {         var x=event.clientX+document.body.scrollLeft-document.body.clientLeft;         var y=event.clientY+document.body.scrollTop-document.body.clientTop;         return {x:x,y:y};     } } //鼠標是否按下 Mouse.isDown=false; /*************************Element類及其方法***********************/ var Element=new Object(); //根據(jù)id獲取目標 Element.getElement=function(id) {     var obj=document.getElementById(id);     if(obj)     {         return obj;     }     else     {         alert("getElement():no such Element");         return null;     } } //獲取元素自身的尺寸 Element.getElementSize=function(object) {     try     {         return {width:object.offsetWidth,height:object.offsetHeight};     }     catch (error)     {         alert("getElementSize():Element is undefined");         return null;     } } //獲取元素的位置 Element.getElementPosition=function(object) {     try     {         var left=0,top=0;         while(object.offsetParent)         {             left+=object.offsetLeft;             top+=object.offsetTop;             object=object.offsetParent;         }         return {left:left,top:top};     }     catch (error)     {         alert("getEelementPosition():Element is undefined");         return null;     } } //獲取元素的父節(jié)點 Element.getElementParentNode=function(obj) {     try     {         return obj.parentNode;     }     catch (error)     {         alert("getElementParentNode():Element is undefined");         return null;     } } /***********************功能函數(shù)**************************/ //移動函數(shù) //移動可拖動元素，并且在其接近目標元素時使目標元素的邊框現(xiàn)實為紅色。 function move(event,dragObj,targetElementAry) {     var event=event || window.event;     var obj=dragObj;     if(Mouse.isDown)     {         //計算可拖動元素的x,y坐標.         var left=Mouse.getMousePosition(event).x-parseInt(obj.getAttribute("difX"));         var top=Mouse.getMousePosition(event).y-parseInt(obj.getAttribute("difY"));         //判斷可拖動元素的x,y坐標與目標元素坐標是否接近         for(i=0;i<targetElementAry.length;i++)         {             var targetLeft=Element.getElementPosition(targetElementAry[i]).left;             var targetTop=Element.getElementPosition(targetElementAry[i]).top;             if(Math.abs(left-targetLeft)<30Math.abs(top-targetTop)<30)             {                 targetElementAry[i].style.borderColor="#f00";             }             else             {                 targetElementAry[i].style.borderColor="#000";             }         }         //設(shè)置可拖動元素的x,y位置.         obj.style.top=top+"px";         obj.style.left=left+"px";     }      } //移動函數(shù) //移動前的準備工作 //計算偏差,clone可拖動元素并將其隱藏 //設(shè)置一些參數(shù) function startDrag(event,dragObj,targetElementAry) {     var event=event || window.event;     var obj=event.target || event.srcElement;     var    left=Element.getElementPosition(obj).left;     var    top=Element.getElementPosition(obj).top;     //計算偏差     var    difX=Mouse.getMousePosition(event).x-left;     var    difY=Mouse.getMousePosition(event).y-top;     //clone節(jié)點     dragObj.appendChild(obj.cloneNode(true));     //設(shè)置透明度     dragObj.childNodes[0].style.filter="alpha(opacity=50)";     dragObj.childNodes[0].style.opacity=0.5;     dragObj.style.left=left+"px";     dragObj.style.top=top+"px";     dragObj.style.display="block";     //設(shè)置參數(shù)     dragObj.setAttribute("difX",difX); //偏差     dragObj.setAttribute("difY",difY);      dragObj.setAttribute("originTop",top); //原始目標y坐標     dragObj.setAttribute("originLeft",left); //原始目標x坐標     dragObj.setAttribute("originObj",obj.id); //原始目標id     obj.style.display="none";     //標記鼠標為按下     Mouse.isDown=true;     //鼠標移動響應     document.onmousemove=function(e){move(e,dragObj,targetElementAry);}; } //輔助函數(shù) //移除指定節(jié)點的所有子節(jié)點 function removeNodeChild(obj) {     for(j=obj.childNodes.length-1;j>=0;j--)     {         obj.removeChild(obj.childNodes[j]);     } } //初始化 function init() {     //創(chuàng)建隱藏的拖動層     var dragObj=document.createElement("div");     dragObj.setAttribute("id","dragDiv");     dragObj.style.cssText="position:absolute;top:0px;left:0px;display:none;";     document.body.appendChild(dragObj);     //創(chuàng)建目標數(shù)組     var targetElementAry=new Array(Element.getElement("one"),Element.getElement("two"),Element.getElement("three"),Element.getElement("four"));     //添加事件     document.onmousedown=function(event)     {            var event=event || window.event;         var obj=event.target || event.srcElement;         if(obj.id=="main")         {             startDrag(event,dragObj,targetElementAry);         }     }     //添加事件     //檢查可移動元素的位置和目標元素的位置是否接近     //是，則將其移動到目標     //否，將其移動到原始位置     document.onmouseup=function()     {         Mouse.isDown=false;         var left=parseInt(dragObj.style.left);         var top=parseInt(dragObj.style.top);         var index=-1;         for(i=0;i<targetElementAry.length;i++)         {             var targetLeft=Element.getElementPosition(targetElementAry[i]).left;             var targetTop=Element.getElementPosition(targetElementAry[i]).top;             if(Math.abs(left-targetLeft)<30Math.abs(top-targetTop)<30)             {                 index=i;             }         }         if(index>-1)         {             var id=dragObj.getAttribute("originObj");             removeNodeChild(dragObj);             dragObj.style.display="none";             var obj=Element.getElement(id);             var node=obj.cloneNode(true);             var parent=Element.getElementParentNode(obj);             removeNodeChild(parent);             targetElementAry[index].appendChild(node);             targetElementAry[index].childNodes[0].style.display="block";         }         else         {             var id=dragObj.getAttribute("originObj");             dragObj.style.left=dragObj.getAttribute("originLeft")+"px";             dragObj.style.top=dragObj.getAttribute("originTop")+"px"             removeNodeChild(dragObj);             dragObj.style.display="none";             if(id)             {                 Element.getElement(id).style.display="block";             }         }     }     } window.onload=init; </script> </HEAD> <BODY> <div   class="xr4o9sp"   id="one" class="container"></div> <div   class="xj9jxy4"   id="two" class="container"></div> <div   class="g4v4rsr"   id="three" class="container"></div> <div   class="o99nhx9"   id="four"  class="container"></div> <div><div   class="x9649sx"   id="main">drag me</div></div> <p>在綠色方塊上按下鼠標，可以將其拖動，在方塊的位置靠近某個方框并且方框的邊線顯示紅色時，放開鼠標，方塊會自動進入方框，其它位置放開鼠標，方塊會返回上一次的位置。</p> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

基于bootstrap的上傳插件fileinput實現(xiàn)ajax異步上傳功能(支持多文件上傳預覽拖拽)
jQuery Ajax 上傳文件處理方式介紹(推薦)
Jquery ajaxsubmit上傳圖片實現(xiàn)代碼
php+ajax實現(xiàn)圖片文件上傳功能實例
jQuery Ajax文件上傳(php)
自己動手打造ajax圖片上傳(網(wǎng)上沒有的)
一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
ajax實現(xiàn)異步文件或圖片上傳功能
簡單實現(xiàn)ajax拖拽上傳文件

標簽：深圳崇左晉城威海西藏伊春撫州銅川

巨人網(wǎng)絡(luò)通訊聲明：本文標題《AjaxUI：鼠標拖拽》，本文關(guān)鍵詞 AjaxUI,鼠標,拖拽,AjaxUI,鼠標,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。