zoukankan      html  css  js  c++  java
  • JS 实现拖动效果

    <html>
    <body style="margin:0px;">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <div id="drag" style="100px; height:100px; background-color:red; z-index:1"></div>
    <div id="drop" style="200px; height:200px;background-color:blue; top:100px; position:absolute;"></div>
    <script>
    var 
    ev , 
    dragObj = null ,
    dragpos , 
    tArr = [] , 
    oriLoc = {} , 
    canMove = true;
    Number.prototype.NaN0 = function(){ return isNaN(this) ? 0 : this; };
    function mouseMove(ev){
        ev   = ev || window.event;
        var mp = getEvLoc(ev);
        if(dragObj && canMove){
            dragObj.style.position = 'absolute';
            dragObj.style.top      = mp.y - dragpos.y;
            dragObj.style.left     = mp.x - dragpos.x;
        }
    }
    
    function mouseDown(ev){
        ev = ev || window.event;
        var t = ev.target || ev.srcElement;
        if( t.id == 'drag' ){
            dragObj = t;
            canMove = true;
            dragpos = getOffset(t ,ev);
            return false;
        }
    }
    
    function getOffset( t, ev  ){
    
        var po = getEvLoc( ev );
            oriLoc = getPosition( t );
        return  {x: (po.x - oriLoc.x), y: (po.y - oriLoc.y) };
    
    }
    
    function mouseUp(ev){
        if(!dragObj) 
            return false;
        ev = ev || window.event;
        var mp = getEvLoc(ev) , canDrop = false;
        for(var i in tArr){
            var tempTar = tArr[i];
            var tp =  getPosition(tArr[i]);
            var tw = tempTar.offsetWidth;
            var th = tempTar.offsetHeight;
            if( mp.x > tp.x && mp.x < (tp.x + tw) && mp.y > tp.y && mp.y < (tp.y + th) ){
                canDrop = true;
            }
        }
        if(!canDrop){
            canMove = false;
            dragObj.style.position = 'relative';
            dragObj.style.top      = oriLoc.y;
            dragObj.style.left     = oriLoc.x;
        }
        dragObj = null;
        return false;
    }
    function getEvLoc( 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 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 addDropTarget( obj ){
        tArr.push(obj);
    }
    
    addDropTarget(document.getElementById('drop'));
    document.onmousedown = mouseDown;
    document.onmousemove = mouseMove;
    document.onmouseup   = mouseUp;
    </script>
    
    </body>
    </html>

     后续功能做成插件形式~ 

  • 相关阅读:
    【转载】使用IntelliJ IDEA创建Maven聚合工程、创建resources文件夹、ssm框架整合、项目运行一体化
    【转载】使用IntelliJ IDEA 配置Maven(入门)
    谈谈JS中的高级函数
    js中typeof和instanceof用法区别
    javascript “||”、“&&”的灵活运用
    前端资源教程合集
    使用Flexible实现手淘H5页面的终端适配
    H5实现的手机摇一摇
    html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
    优化RequireJS项目(合并与压缩)
  • 原文地址:https://www.cnblogs.com/glory-jzx/p/3606937.html
Copyright © 2011-2022 走看看