拖拽

事件是 dom 交互的主要接口

鼠标事件是重点啊

为了写一个小游戏

我不得不写一个拖拽 以前用jq写过 ，但是 不知怎么地把思路沿用到 原生js里 总会出错 今天又是网友天涯 的指点

也写了一个拖拽 似乎还可以

       (function(){
         //简化获取节点
         function $(ids){
               return document.getElementById(ids);
         }
         //拖拽函数
         function drag(obj){
            var o=obj;
            function addEvent(el,name,fn){
              if(el.addEventListener){
                 el.addEventListener(name,fn,false);
                  return;
              }
             el.attachEvent('on'+name,fn);
            }
            function removeEvent(el,name,fn){
                if(el.addEventListener){
                   el.removeEventListener(name,fn,false);
                    return;
                }
                  el.detachEvent('on'+name,fn);

            }
            function move(e){
                o.style.left=e.clientX-50+"px";
                o.style.top=e.clientY-50+"px";
                if(e.preventDefault){
                    e.preventDefault();
                }else{
                    window.event.returnValue = false;
                }
            }
            addEvent(o,"mousedown",function(e){
                addEvent(document,"mousemove",move)
            });
            addEvent(document,"mouseup",function(e){
                removeEvent(document,"mousemove",move);
            });
       }

        drag($("mao"));
        })();

 

<div id="mao" style="cursor:move;background: #00ff00; height: 100px; width: 100px;position: absolute; z-index: 1000;"></div>