zoukankan      html  css  js  c++  java
  • 让一个div拖动和让一个panel拖动加拉大拉小

    一、让一个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自行下载

  • 相关阅读:
    wf(三)
    WF(二)
    WF4.0入门(一)
    枚举
    函数和立即函数
    对象字面量
    Break和continue语句
    对象
    循环语句
    条件分支语句(SWICH语句)
  • 原文地址:https://www.cnblogs.com/lishanyang/p/7994060.html
Copyright © 2011-2022 走看看