码迷,mamicode.com
首页 > 其他好文 > 详细

让一个div拖动和让一个panel拖动加拉大拉小

时间:2017-12-06 19:52:27      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:鼠标移动   javascrip   doc   function   type   def   fse   com   mat   

一、让一个div拖动

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery:鼠标拖动DIV</title>
<style type="text/css">
  div#computerMove{
    position:absolute;
    top:50px;
    left:50px;
    width:200px;
    height:30px;
    line-height:30px;
    background-color:#00CCCC;
    text-align:center;
    color:#FFFFFF;
    cursor:default;
  }
</style>
</head>
<body>
  <div id="computerMove">点击我拖动</div>
  <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var $div = $("div#computerMove");
      /* 绑定鼠标左键按住事件 */
      $div.bind("mousedown",function(event){
        /* 获取需要拖动节点的坐标 */
        var offset_x = $(this)[0].offsetLeft;//x坐标
        var offset_y = $(this)[0].offsetTop;//y坐标
        /* 获取当前鼠标的坐标 */
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        /* 绑定拖动事件 */
        /* 由于拖动时,可能鼠标会移出元素,所以应该使用全局(document)元素 */
        $(document).bind("mousemove",function(ev){
          /* 计算鼠标移动了的位置 */
          var _x = ev.pageX - mouse_x;
          var _y = ev.pageY - mouse_y;
          /* 设置移动后的元素坐标 */
          var now_x = (offset_x + _x ) + "px";
          var now_y = (offset_y + _y ) + "px";
          /* 改变目标元素的位置 */
          $div.css({
            top:now_y,
            left:now_x
          });
        });
      });
      /* 当鼠标左键松开,接触事件绑定 */
      $(document).bind("mouseup",function(){
        $(this).unbind("mousemove");
      });
    })
  </script>
</body>
</html>

二、让一个panel拖动加拉大拉小

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>jQuery拖放</title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="dd.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            body {
                background-color: #eee;
            }
            
            .dragBox_MrY {
                width: 200px;
                height: 100px;
                cursor: move;
                position: absolute;
                top: 30px;
                left: 30px;
                background-color: #FFF;
                border: 1px solid #CCCCCC;
                -webkit-box-shadow: 10px 10px 25px #ccc;
                -moz-box-shadow: 10px 10px 25px #ccc;
                box-shadow: 10px 10px 25px #ccc;
            }
            
            .main_tabletop {
                width: 100%;
                height: 20px;
                background: #ffee00;
            }
        </style>
    </head>

    <body>
        <div class="dragBox_MrY">
            <div class="main_tabletop">我是可以拖动的标题</div>
            左、右、下、左下、右下都可放大缩小
        </div>
    </body>

</html>

dd.js

$(function() {
    $(document).mousemove(function(e) {
        if (!!this.move) {
            var posix = !document.move_target ? {‘x‘: 0, ‘y‘: 0} : document.move_target.posix,
                callback = document.call_down || function() {
                    $(this.move_target).css({
                        ‘top‘: e.pageY - posix.y,
                        ‘left‘: e.pageX - posix.x
                    });
                };

            callback.call(this, e, posix);
        }
    }).mouseup(function(e) {
        if (!!this.move) {
            var callback = document.call_up || function(){};
            callback.call(this, e);
            $.extend(this, {
                ‘move‘: false,
                ‘move_target‘: null,
                ‘call_down‘: false,
                ‘call_up‘: false
            });
        }
    });

    var $box = $(‘.dragBox_MrY .main_tabletop‘).mousedown(function(e) {
        var $p = $(this).parent();
        var $pp = $p[0];
        var offset = $p.offset();
        $pp.posix = {‘x‘: e.pageX - offset.left, ‘y‘: e.pageY - offset.top};
        $.extend(document, {‘move‘: true, ‘move_target‘:$pp });
        
    });
    $(‘.dragBox_MrY‘).bind(
        {‘mousemove‘:function(e){
            $(this).css({cursor: "default"});
            var offset = $(this).offset(), resize=true;
            var x = e.clientX, y = e.clientY, t = offset.top, l = offset.left, w = $(this).width(), h = $(this).height(), ww = $(‘.main_tabletop‘).height(), b = 10;
            if(x<(l+b) && y > (t+ww) && y < (t+h-b)){
                $(this).css({cursor: "w-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            ‘w‘: $p.width(), 
                            ‘h‘: $p.height(), 
                            ‘x‘: e.pageX, 
                            ‘y‘: e.pageY
                        };
                    
                    $.extend(document, {‘move‘: true, ‘call_down‘: function(e) {
                        $p.css({
                            ‘width‘: Math.max(30,  posix.x-e.pageX + posix.w),
                            ‘left‘: Math.max(30,  e.pageX)
                        });
                    }});
                }});
            }else if(x<(l+w) && x>(l+w-b) &&  y > (t+ww) && y < (t+h-b)){
                $(this).css({cursor: "e-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            ‘w‘: $p.width(), 
                            ‘x‘: e.pageX
                        };
                    resizeBox($p, posix, e);
                }});
            }else if(y<(t+h) && y>(t+h-b) && x>(l+b) && x<(l+w-b)){
                $(this).css({cursor: "s-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                        var $p = $(this);
                        var posix = {
                                ‘h‘: $p.height(), 
                                ‘y‘: e.pageY
                            };
                        resizeBox($p, posix, e);
                    }
                });
            }else if(x<(l+b) && y>(t+h-b) && y<(t+h)){
                $(this).css({cursor: "sw-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            ‘w‘: $p.width(), 
                            ‘h‘: $p.height(), 
                            ‘x‘: e.pageX, 
                            ‘y‘: e.pageY
                        };
                    
                    $.extend(document, {‘move‘: true, ‘call_down‘: function(e) {
                        $p.css({
                            ‘width‘: Math.max(30,  posix.x-e.pageX + posix.w),
                            ‘height‘: Math.max(30, e.pageY - posix.y + posix.h),
                            ‘left‘: Math.max(30,  e.pageX)
                        });
                    }});
                }});
            }else if(y<(t+h) && y>(t+h-b) && x<(l+w) && x>(l+w-b)){
                $(this).css({cursor: "se-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                        ‘w‘: $p.width(), 
                        ‘h‘: $p.height(), 
                        ‘x‘: e.pageX, 
                        ‘y‘: e.pageY
                    };
                    $.extend(document, {‘move‘: true, ‘call_down‘: function(e) {
                        $p.css({
                            ‘width‘: Math.max(30, e.pageX - posix.x + posix.w),
                            ‘height‘: Math.max(30, e.pageY - posix.y + posix.h)
                        });
                    }});
                }
                });
            }else if(y<(t+ww) && x>l && x<(l+w)){
                $(this).css({cursor: "move"});
                $(this).unbind("mousedown");
            }
        },
        "mouseup":function(){
            $(this).unbind("mousedown");
        }
    });
    function resizeBox($p,posix,e){
        $.extend(document, {‘move‘: true, ‘call_down‘: function(e) {
            $p.css({
                ‘width‘: Math.max(30, e.pageX - posix.x + posix.w),
                ‘height‘: Math.max(30, e.pageY - posix.y + posix.h)
            });
        }});
    }
});

jquery自行下载

让一个div拖动和让一个panel拖动加拉大拉小

标签:鼠标移动   javascrip   doc   function   type   def   fse   com   mat   

原文地址:http://www.cnblogs.com/lishanyang/p/7994060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!