JS拖拽

拖拽原理
    a, 被拖拽物体绝对定位
    b, 按下时记录鼠标在拖拽物体上的位置，拖拽时鼠标在拖拽物体上的位置保持不变
    c, 鼠标移动时改变拖拽物体位置

 

1，简易拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽原型</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<style type="text/css">
    div,body{
        margin: 0px;
        padding: 0px;
    }
    #div1{
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: #ff0;
    }
</style>
</head>
<body>
    <div id="div1">
    </div>
</body>
<script type="text/javascript">
    var dragDiv = document.getElementById("div1");
    EventUtil.addHandler(window, "load", function(){
        
       var disX = 0; //鼠标的x方向距拖拽左边框长度
        var disY = 0; //鼠标的y方向距拖拽上边框长度
        
        var moveHandler =  function(event){
            var evt = event || window.event;
            
            dragDiv.style.left = evt.clientX - disX + "px";
            dragDiv.style.top  = evt.clientY - disY + "px";
            document.title = "clientX:" + evt.clientX + ";clientY:" + evt.clientY;
        };
        
        var mouseupHandler = function(){
            EventUtil.removeHandler(document, "mousemove", moveHandler);
            EventUtil.removeHandler(document, "mouseup", mouseupHandler);
        };
        
        EventUtil.addHandler(dragDiv, "mousedown", function(event){
           var evt = event || window.event;
            
           //鼠标按下记录鼠标在拖拽物体上的位置
            disX = evt.clientX - dragDiv.offsetLeft;
           disY = evt.clientY - dragDiv.offsetTop;
            
           EventUtil.addHandler(document, "mousemove", moveHandler);
           EventUtil.addHandler(document, "mouseup", mouseupHandler);
            
        });    
        
    });
</script>
</html>

2，边界限制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽原型</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<style type="text/css">
    div,body{
        margin: 0px;
        padding: 0px;
    }
    #div1{
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: #ff0;
    }
</style>
</head>
<body>
    <div id="div1">
    </div>
</body>
<script type="text/javascript">
    var dragDiv = document.getElementById("div1");
    EventUtil.addHandler(window, "load", function(){
        
       var disX = 0; //鼠标的x方向距拖拽左边框长度
        var disY = 0; //鼠标的y方向距拖拽上边框长度
        
        var moveHandler =  function(event){
            var evt = event || window.event;
            
            var leftDis = evt.clientX - disX ;
            //左边临界判断
             leftDis = leftDis < 0 ? 0 : leftDis;
            //右边临界判断
             var maxLeft = document.documentElement.clientWidth - dragDiv.offsetWidth;
            leftDis = leftDis > maxLeft ? maxLeft : leftDis;
            
            
            var topDis  = evt.clientY - disY;
            //上边临界判断
             topDis = topDis < 0 ? 0 : topDis;
            //下边临界判断
             var maxTop = document.documentElement.clientHeight - dragDiv.offsetHeight;
            topDis = topDis > maxTop ? maxTop : topDis;
            
            dragDiv.style.left = leftDis + "px";
            dragDiv.style.top  = topDis + "px";
            document.title = "clientX:" + evt.clientX + ";clientY:" + evt.clientY;
        };
        
        var mouseupHandler = function(){
            EventUtil.removeHandler(document, "mousemove", moveHandler);
            EventUtil.removeHandler(document, "mouseup", mouseupHandler);
        };
        
        EventUtil.addHandler(dragDiv, "mousedown", function(event){
            var evt = event || window.event;
            
            //鼠标按下记录鼠标在拖拽物体上的位置
             disX = evt.clientX - dragDiv.offsetLeft;
            disY = evt.clientY - dragDiv.offsetTop;
            
            EventUtil.addHandler(document, "mousemove", moveHandler);
            EventUtil.addHandler(document, "mouseup", mouseupHandler);
            
        });    
        
    });
</script>
</html>

posted on 2015-05-23 00:48  taven-liu  阅读(261)  评论(0)  编辑  收藏  举报

导航