zoukankan      html  css  js  c++  java
  • bootstrap模态框实现相对定位拖拽

    1、正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果。

    $(".modal .modal-header").mousedown(function(e) {
        var isDrag = false;//是否可以拖拽
        var ev = e || window.event;
        var ol = $(this).offset().left;//盒子最左边 距离 窗口最左边 的距离
        var ot = $(this).offset().top;
        var l = $(this).parent().css("left");
        var t = $(this).parent().css("top");
        deltaX = ev.pageX - parseInt(l);//鼠标 距离 盒子最左边 的距离
        deltaY = ev.pageY - parseInt(t);
        isDrag = true;
        var _this = $(this).parent();
        $(document).mousemove(function(e) {
            var ev = e || window.event;
            if (isDrag) {
                moveL = ev.pageX - deltaX;
                moveT = ev.pageY - deltaY;
                _this.css({
                    "left": moveL,
                    "top": moveT
                });
            }
        });
        $(document).mouseup(function() {
            isDrag = false;
        });
    });

    当然,没有做限定,想怎么脱就怎么脱,,,哦不,是拖、、、拖,不是你想的那样的,好吧,就是你想的那样。

  • 相关阅读:
    UVA 254 Towers of Hanoi
    UVA 701 The Archeologists' Dilemma
    UVA 185 Roman Numerals
    UVA 10994 Simple Addition
    UVA 10570 Meeting with Aliens
    UVA 306 Cipher
    UVA 10160 Servicing Stations
    UVA 317 Hexagon
    UVA 10123 No Tipping
    UVA 696 How Many Knights
  • 原文地址:https://www.cnblogs.com/zhengshize/p/8510491.html
Copyright © 2011-2022 走看看