bootstrap modalモードボックスドラッグ拡張

2768 ワード

主管はbootstrap modalにドラッグ移動効果を要求した.コードは次のとおりです.
JS
 1 // bootstrap    ,  bootstrap    
 2 var btModalMoveEx = function () {
 3     function moveEx($this) {
 4         var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog");
 5         var move = {isMove: false, left: 0, top: 0};
 6         $this.on("mousemove", function (e) {
 7             if (!move.isMove) return;
 8             $dialog.offset({top: e.pageY - move.top, left: e.pageX - move.left});
 9         }).on("mouseup", function () {
10             move.isMove = false;
11         });
12         $head.on("mousedown", function (e) {
13             move.isMove = true;
14             var offset = $dialog.offset();
15             move.left = e.pageX - offset.left;
16             move.top = e.pageY - offset.top;
17         });
18     }
19 
20     var old = $.fn.modal;
21     $.fn.modal = function (o, _r) {
22         var $this = $(this);
23         //    . 
24         if (!$this.attr("isbindmv")){
25             $this.attr("isbindmv", "1");
26             moveEx($this);
27         }
28         return old.call(this, o, _r);
29     };
30 };

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

 
使用方法
$('#editModal').modal({backdrop: 'static'});