【解决】easyui Drag拖动层超过边界的Bug解决方案

上个月写过一篇“ LigerUI Drag拖动层超过边界的Bug解决方案” 的文章。那时候正用LigerUI，这个月项目换了一套UI，改用easyui,同样在拖拽这个地方有相同的毛病。

easyui的JS文件就没前一个那么容易看懂了。前一个至少命名和注释都还挺通俗易懂的。很容易看懂要改哪个地方。

下面贴上easyui Drag拖动层的Bug修复方案：

修改jquery.draggable.js文件一共修改三处：

第一处：开始地方加上如下dragCheck(e,targetPos,type)判断函数（两个//----内的）：

(function($){
var _1=false;
//---------------------------
function dragCheck(e,targetPos,type){
	wW=document.body.clientWidth;
	wH=document.body.clientHeight;
	tW=$(e.data.target).width();//target width
	tH=$(e.data.target).height();//target height	
	targetPos=$(e.data.target).position();

	if(type=="drop"){
	  eL=eT="";	  
	  if(e.pageX>wW-tW-20){
	    eL=wW-tW-20;
	  }
	  if(e.pageY<=0){
	    eT=20;
	  }
	  return {eL:eL,eT:eT};
	}
    
    if(targetPos.left>wW-tW-20){
	   targetPos.left=wW-tW-20;
	}
}
//-------------------------------

function _2(e){
var _3=$.data(e.data.target,"draggable").options;

 第二处：在如下地方加上：

}else{

//---------------------
var _pos=$(e.data.target);
var returnVar=dragCheck(e,$(e.data.target),"drop");
if(returnVar!=undefined){

   if(returnVar.eL!=""){
     e.data.left=returnVar.eL;
   }
   if(returnVar.eT!=""){
     e.data.top=returnVar.eT;
   }  
}

//---------------------

$(e.data.target).css({position:"absolute",left:e.data.left,top:e.data.top});
_16();
_15();
}

第三处：在如下地方加上：

$(this).css("cursor","");
var _20=$(e.data.target).position();
//--------
	dragCheck(e,_20);
//--------
var _21={startPosition:$(e.data.target).

修改的地方都在两个//--------包围中，都添加上之间代码即可。 

 

【附js文件】jquery.draggable.js

注：附件文件中

if(e.pageY<=0){

    eT=tH;

 }

改为

if(e.pageY<=0){

    eT=20;

 }

 。。。小BUG~~

 

附件下载：
jquery.draggable.zip 2.26KB