DIV CSS 佈局教程網

主管要求bootstrap modal 帶有拖拽移動效果.代碼如下:

// bootstrap 模態框窗口 移動擴展, 在bootstrap 初始化後 調用
var btModalMoveEx = function () {
    function moveEx($this) {
        var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog");
        var move = {isMove: false, left: 0, top: 0};
        $this.on("mousemove", function (e) {
            if (!move.isMove) return;
            $dialog.offset({top: e.pageY - move.top, left: e.pageX - move.left});
        }).on("mouseup", function () {
            move.isMove = false;
        });
        $head.on("mousedown", function (e) {
            move.isMove = true;
            var offset = $dialog.offset();
            move.left = e.pageX - offset.left;
            move.top = e.pageY - offset.top;
        });
    }

    var old = $.fn.modal;
    $.fn.modal = function (o, _r) {
        var $this = $(this);
        // 標識 是否已經綁定過移動事件了.用於防止重復綁定
        if ($this.attr("isbindmv")) return old.call(this, o, _r);
        $this.attr("isbindmv", "1");

        moveEx($this);
        return old.call(this, o, _r);
    };
};

CSS 

.modal[isbindmv] .modal-header {
    cursor: move;
}

使用方式

$('#editModal').modal({backdrop: 'static'});