var todolist = [];
        var level = 10;  //元素移动从起点到终点之间过渡的级数,大于0的整数
        var speed = 10; //毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大
        for (i=1; i<=level; i++){
            todolist.push(function(t){
                setTimeout(function(){
                    obj.style.left = objL + (obj2L-objL)*(t/level) + “px”;
                    obj.style.top = objT + (obj2T-objT)*(t/level) + “px”;
                    if(t==i)todolist=null;
                },speed*arguments[0]);
            });
        }
        for (i=1; i<=level; i++){
            todolist[i-1](i);
        }
        document.body.removeChild(d);
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

 RegionSelect.prototype.onEnd = function(){
  if(this.selectDiv){
    this.selectDiv.style.display = “none”;
  }
  this.isSelect = false;
  //_selectedRegions = this.selectedRegion;
 }

页面内容很简单 有三个div 
一个用来拖拽的id是“a”,另外三个都是用来放置“a”的;
实现原理不难:
窗口打开后调用MakeElementDraggable函数。
MakeElementDraggable函数功能如下:
把a的鼠标按下事件的响应函数指向
InitiateDrag,它将重新定位拖拽窗口为鼠标所在位置,然后鼠标移动事件用drag函数响应,鼠标放开事件用drop函数响应,这两个函数自己看吧,就是实现动态拖拽和在指定区域放置id为a的窗口。
代码下载。

/*
    Author:misshjn
    HomePage:
    Date:2007-04-30

     }
   }
 }

欧博国际平台 1欧博国际平台 2页面代码
欧博国际平台 3<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
欧博国际平台 4
欧博国际平台 5<html xmlns=”” >
欧博国际平台 6<head>
欧博国际平台 7    <title>Drag and Drop Demo</title>
欧博国际平台 8    
欧博国际平台 9欧博国际平台 10    <style type=”text/css”>欧博国际平台 11
欧博国际平台 12        .dragElement 
欧博国际平台 13欧博国际平台 14        {欧博国际平台 15}{
欧博国际平台 16            background-color:Green; 
欧博国际平台 17             
欧博国际平台 18            position:absolute;
欧博国际平台 19            z-index:5000; 
欧博国际平台 20                        display: block;
欧博国际平台 21                        padding-top:30px;
欧博国际平台 22        }
欧博国际平台 23        
欧博国际平台 24        .dropZone 
欧博国际平台 25欧博国际平台 26        {欧博国际平台 27}{
欧博国际平台 28            background-color:Blue; 
欧博国际平台 29            width:300px; 
欧博国际平台 30            height:300px; 
欧博国际平台 31            position:absolute;
欧博国际平台 32            top:100px; 
欧博国际平台 33            right:200px;
欧博国际平台 34        }
欧博国际平台 35        
欧博国际平台 36        .highlightDropZone 
欧博国际平台 37欧博国际平台 38        {欧博国际平台 39}{    
欧博国际平台 40            background-color:Yellow;
欧博国际平台 41        }
欧博国际平台 42        
欧博国际平台 43        
欧博国际平台 44        
欧博国际平台 45        .DefaultDropZoneColor
欧博国际平台 46欧博国际平台 47        {欧博国际平台 48}{
欧博国际平台 49            background-color:Blue;
欧博国际平台 50        }
欧博国际平台 51    </style>
欧博国际平台 52</head>
欧博国际平台 53<body>
欧博国际平台 54    <form id=”form1″ runat=”server”>
欧博国际平台 55    <div>
欧博国际平台 56    
欧博国际平台 57    
欧博国际平台 58    <div id=”a” class=”dragElement”>拖拽窗口 </div>
欧博国际平台 59欧博国际平台,    
欧博国际平台 60    
欧博国际平台 61    <div id=”dZone” style=”position:absolute; top:100px; right:200; width:300px; height:300px” class=”DefaultDropZoneColor”>
欧博国际平台 62    放开区域 1
欧博国际平台 63    </div>
欧博国际平台 64    
欧博国际平台 65    <div id=”dZone2″ class=”DefaultDropZoneColor” style=”position:absolute; top:500px; right:200px; width:300px; height:300px”>
欧博国际平台 66    放开区域 2 
欧博国际平台 67    </div>
欧博国际平台 68    
欧博国际平台 69    <div id=”dZone3″ class=”DefaultDropZoneColor” style=”position:absolute; top:300;right:100px; width:100px; height:200px”>
欧博国际平台 70欧博国际网站,    放开区域 3
欧博国际平台 71    </div>
欧博国际平台 72    
欧博国际平台 73    
欧博国际平台 74    </div>
欧博国际平台 75    </form>
欧博国际平台 76</body>
欧博国际平台 77</html>
欧博国际平台 78
欧博国际平台 79欧博国际平台 80<script language=”javascript” type=”text/javascript”>欧博国际平台 81
欧博国际平台 82
欧博国际平台 83var dropZoneArray = new Array(5); 
欧博国际平台 84dropZoneArray[0] = “dZone”;
欧博国际平台 85dropZoneArray[1] = “dZone2”; 
欧博国际平台 86dropZoneArray[2] = “dZone3”; 
欧博国际平台 87
欧博国际平台 88var mouseState = ‘up’;
欧博国际平台 89
欧博国际平台 90function MakeElementDraggable(obj) 
欧博国际平台 91欧博国际平台 92欧博国际平台 93{
欧博国际平台 94    var startX = 0; 
欧博国际平台 95    var startY = 0; 
欧博国际平台 96
欧博国际平台 97function InitiateDrag(e) 
欧博国际平台 98欧博国际平台 99欧博国际平台 100{
欧博国际平台 101    var evt = e || window.event;
欧博国际平台 102    
欧博国际平台 103    startX = parseInt(evt.clientX); 
欧博国际平台 104    startY = parseInt(evt.clientY);  
欧博国际平台 105    
欧博国际平台 106    obj.style.top = parseInt(startY) + ‘px’;
欧博国际平台 107    obj.style.left = parseInt(startX) + ‘px’;  
欧博国际平台 108  
欧博国际平台 109    
欧博国际平台 110    document.onmousemove = Drag;
欧博国际平台 111    document.onmouseup = Drop;  
欧博国际平台 112    
欧博国际平台 113    return false;             
欧博国际平台 114}
欧博国际平台 115
欧博国际平台 116
欧博国际平台 117
欧博国际平台 118function Drop(e) 
欧博国际平台 119欧博国际平台 120欧博国际平台 121{
欧博国际平台 122       var evt = e || window.event; 
欧博国际平台 123    
欧博国际平台 124    // check that if we are in the drop zone
欧博国际平台 125    if(IsInDropZone(evt))     
欧博国际平台 126欧博国际平台 127    欧博国际平台 128{        
欧博国际平台 129        document.onmouseup = null; 
欧博国际平台 130        document.onmousemove = null;
欧博国际平台 131    }
欧博国际平台 132}
欧博国际平台 133
欧博国际平台 134function Drag(e) 
欧博国际平台 135欧博国际平台 136欧博国际平台 137{
欧博国际平台 138
欧博国际平台 139    // only drag when the mouse is down
欧博国际平台 140       
欧博国际平台 141    var dropZoneObject; 
欧博国际平台 142    
欧博国际平台 143    var evt = e || window.event; 
欧博国际平台 144    
欧博国际平台 145    obj.style.top = evt.clientY + ‘px’; 
欧博国际平台 146    obj.style.left = evt.clientX + ‘px’; 
欧博国际平台 147    
欧博国际平台 148    // Check if we are in the drop Zone 
欧博国际平台 149    if(IsInDropZone(evt)) 
欧博国际平台 150欧博国际平台 151    欧博国际平台 152{        
欧博国际平台 153        dropZoneObject = evt.srcElement;       
欧博国际平台 154        dropZoneObject.className = ‘highlightDropZone’;       
欧博国际平台 155    } 
欧博国际平台 156    
欧博国际平台 157    else 
欧博国际平台 158欧博国际平台 159    欧博国际平台 160{  
欧博国际平台 161        ResetColor(); 
欧博国际平台 162         
欧博国际平台 163    }
欧博国际平台 164       
欧博国际平台 165    
欧博国际平台 166}
欧博国际平台 167
欧博国际平台 168a.onmousedown = InitiateDrag;
欧博国际平台 169
欧博国际平台 170}
欧博国际平台 171
欧博国际平台 172function ResetColor() 
欧博国际平台 173欧博国际平台 174欧博国际平台 175{
欧博国际平台 176    document.getElementById(“dZone”).className = ‘DefaultDropZoneColor’; 
欧博国际平台 177    document.getElementById(“dZone2”).className = ‘DefaultDropZoneColor’;    
欧博国际平台 178    document.getElementById(“dZone3”).className = ‘DefaultDropZoneColor’; 
欧博国际平台 179       
欧博国际平台 180}
欧博国际平台 181
欧博国际平台 182function IsInDropZone(evt) 
欧博国际平台 183欧博国际平台 184欧博国际平台 185{
欧博国际平台 186    var result = false; 
欧博国际平台 187    
欧博国际平台 188    var obj = evt.srcElement; 
欧博国际平台 189    
欧博国际平台 190    // iterate through the array and find it the id exists 
欧博国际平台 191    for(i = 0; i < dropZoneArray.length; i++) 
欧博国际平台 192欧博国际平台 193    欧博国际平台 194{
欧博国际平台 195        if(obj.id == dropZoneArray[i]) 
欧博国际平台 196欧博国际平台 197        欧博国际平台 198{
欧博国际平台 199            result = true; 
欧博国际平台 200            break; 
欧博国际平台 201        }
欧博国际平台 202    }
欧博国际平台 203    
欧博国际平台 204    return result;
欧博国际平台 205}
欧博国际平台 206
欧博国际平台 207// make the element draggable
欧博国际平台 208window.onload = MakeElementDraggable(document.getElementById(“a”)); 
欧博国际平台 209
欧博国际平台 210</script>

特点:
1、兼容 IE6、FF、Opear(IE7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)

 }

    var d = document.createElement(“div”);
    d.style.position = “absolute”;
    d.style.width = obj.clientWidth + parseInt(_getStyle(obj,”borderLeftWidth”),10) + parseInt(_getStyle(obj,”borderRightWidth”)) -2 + “px”;
    d.style.height = obj.clientHeight + parseInt(_getStyle(obj,”borderTopWidth”),10) + parseInt(_getStyle(obj,”borderBottomWidth”)) -2 + “px”;
    d.style.border = “1px dashed #666”;
    d.style.top = _getStyle(obj,”top”);
    d.style.left = _getStyle(obj,”left”);
    d.style.zIndex = “9999”;
    document.body.appendChild(d);
    document.onmousemove=function(evt){
        d.style.left= (evt?evt.pageX:event.clientX) – obj.startX + “px”;
        d.style.top= (evt?evt.pageY:event.clientY) – obj.startY + “px”;
    };
    document.onmouseup=function(){
        var objL = parseInt(_getStyle(obj,”left”),10);
        var objT = parseInt(_getStyle(obj,”top”),10);
        var obj2L = parseInt(d.style.left,10);
        var obj2T = parseInt(d.style.top,10);

 }

/*
    拖动结束
*/

<style><!–
body{padding-top:50px;padding-left:100px;padding-right:150px;}
 
.fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px
solid #cccccc;margin-right:10px;margin-bottom:10px;}
  .seled{border:1px solid #ff0000;background-color:#D6DFF7;}
–></style>
<script type=”text/javascript”>// <![CDATA[
Array.prototype.remove = function( item ){
  for( var i = 0 ; i < this.length ; i++ ){
   if( item == this[i] )
    break;
  }
  if( i == this.length )
   return;
  for( var j = i ; j < this.length – 1 ; j++ ){
   this[ j ] = this[ j + 1 ];
  }
  this.length–;
  }

1、兼容IE6、FF、Opear(IE7还没有机会测试)
2、拖动流畅 3、起点与终点之间有过渡,使移动更平滑(可调) 演示 /*
Author:misshjn HomePage…

   this.startX = posXY(evt).x;
   this.startY = posXY(evt).y;
   this.isSelect = true;

    拖动开始
*/
function _getStyle(element,styleProp){
    if (element.currentStyle){
        var y = element.currentStyle[styleProp];
    }else if (window.getComputedStyle){
        var y = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp.replace(/([A-Z])/g,”-$1″).toLowerCase());
    }
    return y;
}
function _elementOnmouseDown(evt,blockID){
    var obj, temp;
    obj=document.getElementById(blockID);
    var x = evt.clientX || evt.pageX;
    var y = evt.clientY || evt.pageY;
    obj.startX=x-obj.offsetLeft;
    obj.startY=y-obj.offsetTop;

   var r_top = parseInt(region.offsetTop);
   var r_left = parseInt(region.offsetLeft);
   var r_right = r_left + parseInt(region.offsetWidth);
   var r_bottom = r_top + parseInt(region.offsetHeight);

演示

 var _selectedRegions = [];
 function RegionSelect(selRegionProp){
   this.regions =[];
   var _regions =
document.getElementsBySelector(selRegionProp[“region”]);
   if(_regions  &&  _regions.length > 0){
    var _self = this;
     for(var i=0; i< _regions.length;i++){
       _regions[i].onmousedown = function(){
         var evt = window.event || arguments[0];
         if(!evt.shiftKey  &&  !evt.ctrlKey){
          // 清空所有select样式
          _self.clearSelections(_regions);
          this.className += ” “+_self.selectedClass;
          // 清空selected数组,并加入当前select中的元素
          _selectedRegions = [];
          _selectedRegions.push(this);
         }else{
          if(this.className.indexOf(_self.selectedClass) == -1){
            this.className += ” “+_self.selectedClass;
            _selectedRegions.push(this);
          }else{
            this.className =
this.className.replaceAll(_self.selectedClass,””);
            _selectedRegions.remove(this);
          }
         }
         clearEventBubble(evt);
       }
       this.regions.push(_regions[i]);
     }
   }
   this.selectedClass = selRegionProp[“selectedClass”];
   this.selectedRegion = [];
   this.selectDiv = null;
   this.startX = null;
   this.startY = null;
 }

 RegionSelect.prototype.onBeforeSelect = function(evt){
  if(!document.getElementById(“selContainer”)){
     this.selectDiv = document.createElement(“div”);
     this.selectDiv.style.cssText =
“position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px
dashed
#0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;”;
     this.selectDiv.id = “selContainer”;
     document.body.appendChild(this.selectDiv);
   }else{
     this.selectDiv = document.getElementById(“selContainer”);
   }

  addEvent(“mouseup”,function(){
    _self.onEnd();
  },document);
 }

 RegionSelect.prototype.select = function(){
  var _self = this;
  addEvent(“mousedown”,function(){
    var evt = window.event || arguments[0];
    _self.onBeforeSelect(evt);
    clearEventBubble(evt);
  },document);

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注