仿jquery dialog樣式，兼容IE，的拖拽dialog jquery插件實現

效果圖：

最終版，已整合爲1個js，暴露公共方法名統一：

;(function($) {
    /**
     * dialog配置
     */
   $.drag_div = function(options) {};
   $.extend($.drag_div.prototype, {
         defaults: {
                    classes: {
                        "my_ui_widget_content": "my_ui_widget_content",
                        "ui_widget_header": "ui_widget_header",
                        "ui_widget_header_close": "ui_widget_header_close",            
                        "stable_div": "stable_div"     
                    },
                    styles:{
                        my_ui_widget_content :{
                            'position':'absolute',
                            'left':'10%',
                            'top':'5%',
                            'border': '1px solid #c5c5c5',
                            'background': '#ffffff',
                            'padding':'10px',
                            'overflow-x':'hidden',
                            'overflow-y':'auto',
                            'max-width':'500px',
                            '_width':'expression(document.body.clientWidth > 500? "500px": "auto" )',
                            'max-height':'300px',
                            '_height':'expression(document.body.clientHeight > 300 ? "300px" : "auto")',
                             'filter': 'alpha(opacity=90)',  
                            '-moz-opacity':'0.9',  
                            'opacity': '0.9'
                        },
                        ui_widget_header :{
                            'display':'inline-block',
                            'width':'80%',
                            'text-align':'center',
                            'padding':'5px',
                            'border': '1px solid #dddddd',
                            'background': '#e9e9e9',
                            'color': '#333333',
                            'font-size':'20px',
                            'font-weight': 'bold',
                             'cursor': 'move'
                        },
                        ui_widget_header_close:{
                            'display':'inline-block',
                            'width':'15%',
                            'text-align':'center',
                            'padding':'5px',
                            'border': '1px solid #c5c5c5',
                            'background': '#f6f6f6',
                            'color': '#333333',
                            'font-size':'20px',
                            'font-weight': 'bold',
                            'cursor': 'pointer'
                        },
                        stable_div:{
                        }
                    }
          }
   });
    
   /**
    * jquery封裝功能
    */
  $.fn.dragDiv = function(divWrap) {
    if(!divWrap){
        divWrap = ".my_ui_widget_content";
    }
    return this.each(function() {
      var $divMove = $(this);//鼠標可拖拽區域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整個移動區域
      var mX = 0, mY = 0;//定義鼠標X軸Y軸
      var dX = 0, dY = 0;//定義div左、上位置
      var isDown = false;//mousedown標記
      if(document.attachEvent) {//ie的事件監聽，拖拽div時禁止選中內容，firefox與chrome已在css中設置過-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
    
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠標拖拽啓動
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠標滑動時的X軸
        var y = event.clientY;//鼠標滑動時的Y軸
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div動態位置賦值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠標拖拽結束
      });
      //綁定關閉事件
      var $closeBtn = $divWrap.find(".ui_widget_header_close");
      if($closeBtn && $closeBtn.length > 0){
        $closeBtn.bind("click",function(){
            $divWrap.remove();
        });
      }
    });
  };
})(jQuery);

 /**
             * 設置dialog數據變化html
           參數：
            {
                "id":"xx",//dialog id
                "my-ui-widget-content-info":"xx"//變動html
            }
            */
var my_drag_div_operator_object = {
           //數據類型
        __getClass :function(object){
            return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
        },
        //css對象轉style串
        _getStyleStr : function(item){
            var styleStr = '';
              if(this.__getClass(item) == 'Object'){
                  for ( var p in item ){ 
                     var objVal = item[p];
                     styleStr += p + ":" +objVal + ";";
                 }
             }
             return styleStr;
        },
        _initDragDivStyle:function(){
            //加載樣式,暫時style中不支持 filter ,就往head中加style FIXEDME
            var defaults = $.drag_div.prototype.defaults;
            
            var drag_style = '<style type="text/css">';
            
            drag_style += '.'+defaults.classes.my_ui_widget_content+'{';
            drag_style += this._getStyleStr(defaults.styles.my_ui_widget_content);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ui_widget_header+'{';
            drag_style += this._getStyleStr(defaults.styles.ui_widget_header);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ui_widget_header_close+'{';
            drag_style += this._getStyleStr(defaults.styles.ui_widget_header_close);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.stable_div+'{';
            drag_style += this._getStyleStr(defaults.styles.stable_div);
            drag_style += '}';
            
            drag_style += '</style>';
            var headHtml = $("head").html();
            if(!(headHtml && headHtml.indexOf('.'+defaults.classes.my_ui_widget_content) > -1)){
                $("head").append(drag_style);
            }
        },
        /**
        得到drag DIV html代碼，默認html根爲body
        參數：
        {
            "id":"xx",//id
            "ui-widget-header-info": "xx",//dialog標題信息(可覆蓋)
            "my-ui-widget-content-info":"xx",//dialog內容信息html(可覆蓋，常常變更的html)
            "stable_div":""//dialog內容信息html((可覆蓋，不常常變更的html)
        }
        調用：
        showDragDivHtml({"id":"xx","ui_widget_header": "合同基礎信息導入進度詳情","my_ui_widget_content_info":"處理中，請稍好。。。","stable_div":dialogProgressBar1Html});//展現拖拽
        */
        showDragDivHtml:function(options){
            var defaults = {"id":"","ui_widget_header": "title info is null!","my_ui_widget_content_info":"content is null!","stable_div":""};
            var options =  $.extend({},defaults, options);  
            if(options.id){
                    this._initDragDivStyle();//初始化樣式
                    var dragDivHtml = '';
                dragDivHtml += '<div class="my_ui_widget_content" id="my_ui_widget_content'+options.id+'">';
                    dragDivHtml += '<span id="'+options.id+'" class="ui_widget_header">'+options.ui_widget_header+'</span><span class="ui_widget_header_close" title="\u5173\u95ed">x</span>';
                    dragDivHtml += '<div class="stable_div">'+options.stable_div+'</div>';//dialog穩定區域（暫時放進度條）
                    dragDivHtml += '<div class="my_ui_widget_content_info">';
                    dragDivHtml += options.my_ui_widget_content_info;//展現內容
                    dragDivHtml += '</div>';
                dragDivHtml += '</div>';
                $("body").prepend(dragDivHtml);
                $("#"+options.id).dragDiv(".my_ui_widget_content");
            }
        },
            setDragDivContentInfo:function(options){
                var defaults = {"id":"","my_ui_widget_content_info":"請指定內容"};
                var options =  $.extend(defaults, options);  
                if(options.id){
                    $("#my_ui_widget_content"+options.id+" .my_ui_widget_content_info").html(options.my_ui_widget_content_info);
                }
            }
}

1.實現代碼：common_drag_div.jsp

 

 <style type="text/css">
.my_ui_widget_content {
    position: absolute;
    top:30%;
    left:20%;
    border: 1px solid #c5c5c5;
    background: #ffffff;
    padding:5px;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:600px;
    _height:expression(this.scrollHeight > 500 ? "500px" : "auto");
     filter: alpha(opacity=90);  
    -moz-opacity:0.9;  
    opacity: 0.9;
}
.ui_widget_header {
    text-align:center;
    cursor: move;
    padding:5px;
    border: 1px solid #dddddd;
    background: #e9e9e9;
    color: #333333;
    font-size:20px;
    font-weight: bold;
    margin-right:10px;
}
.ui_widget_header_close{
    position:absolute;
    right:17px;
    padding-left:3px;
    padding-right:3px;
    margin-left:5px;
    text-align:center;
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
    cursor: pointer;
}
.stable_div{
}
    </style>
    
<script>
(function($) {
  $.fn.dragDiv = function(divWrap) {
    if(!divWrap){
        divWrap = ".my_ui_widget_content";
    }
    return this.each(function() {
      var $divMove = $(this);//鼠標可拖拽區域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整個移動區域
      var mX = 0, mY = 0;//定義鼠標X軸Y軸
      var dX = 0, dY = 0;//定義div左、上位置
      var isDown = false;//mousedown標記
      if(document.attachEvent) {//ie的事件監聽，拖拽div時禁止選中內容，firefox與chrome已在css中設置過-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
    
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠標拖拽啓動
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠標滑動時的X軸
        var y = event.clientY;//鼠標滑動時的Y軸
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div動態位置賦值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠標拖拽結束
      });
      //綁定關閉事件
      var $closeBtn = $divWrap.find(".ui_widget_header_close");
      if($closeBtn && $closeBtn.length > 0){
        $closeBtn.bind("click",function(){
            $divWrap.hide();
        });
      }

    });
  };
  
})(jQuery);

//
/**
得到drag DIV html代碼，默認html根爲body

參數：
{
    "id":"xx",//id
    "ui-widget-header-info": "xx",//dialog標題信息
    "my-ui-widget-content-info":"xx",//dialog內容信息
    "stable_div":""//dialog佈局信息（此處能夠指定進度條等）
}
調用：
showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基礎信息導入進度詳情","my_ui_widget_content_info":"處理中，請稍好。。。","stable_div":dialogProgressBar1Html});//展現拖拽
*/
function showDragDivHtml(options){
    var defaults = {"id":"","ui_widget_header_info": "請指定標題","my_ui_widget_content_info":"請指定內容","stable_div":""};
    var options =  $.extend({},defaults, options);  
    if(options.id){
                debugger;
            var dragDivHtml = '';
        dragDivHtml += '<div class="my_ui_widget_content" id="my_ui_widget_content'+options.id+'">';
            dragDivHtml += '<div id="'+options.id+'" class="ui_widget_header"><span class="ui_widget_header_info">';
            dragDivHtml += options.ui_widget_header_info;//title信息
            dragDivHtml += '</span><div class="ui_widget_header_close" title="\u5173\u95ed">x</div></div>';
            dragDivHtml += '<div class="stable_div">'+options.stable_div+'</div>';//dialog穩定區域（暫時放進度條）
            dragDivHtml += '<div class="my_ui_widget_content_info">';
            dragDivHtml += options.my_ui_widget_content_info;//展現內容
            dragDivHtml += '</div>';
        dragDivHtml += '</div>';
        $("body").prepend(dragDivHtml);
        $("#"+options.id).dragDiv(".my_ui_widget_content");
    }
}
//設置拖拽框動態信息
/**
{
    "id":"xx",
    "my-ui-widget-content-info":"xx"
}
*/
function setDragDivcontent_info(options){
    var defaults = {"id":"","my_ui_widget_content_info":"請指定內容"};
    var options =  $.extend(defaults, options);  
    if(options.id){
        $("#my_ui_widget_content"+options.id+" .my_ui_widget_content_info").html(options.my_ui_widget_content_info);
    }
}
//init drag div
$(document).ready(function() {
  //$("#move1").dragDiv();//拖拽整個div
  //$("#move2").dragDiv(".my_ui_widget_content");//拖拽div頭部
});
</script>

 

二：這個是對公用組件包括樣式在內的的整理成一個js文件進行引用的模塊：common_drag_div.js

;(function($) {
   $.dragDiv = function(options) {}; 
   $.extend($.dragDiv.prototype, {
         defaults: {
                    classes: {
                        "my_ui_widget_content": "my_ui_widget_content",
                        "ui_widget_header": "ui_widget_header",
                        "ui_widget_header_close": "ui_widget_header_close",            
                        "stable_div": "stable_div"     
                    },
                    styles:{
                        my_ui_widget_content :{
                            'position': 'absolute',
                            'top':'10%',
                            'left':'15%',
                            'border': '1px solid #c5c5c5',
                            'background': '#ffffff',
                            'padding':'5px',
                            'overflow-x':'hidden',
                            'overflow-y':'auto',
                            'max-height':'600px',
                            '_height':'expression(this.scrollHeight > 500 ? "500px" : "auto")',
                             'filter': 'alpha(opacity=50)',  
                            '-moz-opacity':'0.5',  
                            'opacity': '0.5'
                        },
                        ui_widget_header :{
                            'text-align':'center',
                            'cursor': 'move',
                            'padding':'5px',
                            'border': '1px solid #dddddd',
                            'background': '#e9e9e9',
                            'color': '#333333',
                            'font-size':'20px',
                            'font-weight': 'bold',
                            'margin-right':'10px'
                        },
                        ui_widget_header_close:{
                            'position':'absolute',
                            'right':'17px',
                            'padding-left':'3px',
                            'padding-right':'3px',
                            'margin-left':'5px',
                            'text-align':'center',
                            'border': '1px solid #c5c5c5',
                            'background': '#f6f6f6',
                            'font-weight': 'normal',
                            'color': '#454545',
                            'cursor': 'pointer'
                        },
                        stable_div:{
                        }
                     }
          },
           //數據類型
           __getClass :function(object){
               return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
           },
           //css對象轉style串
           _getStyleStr : function(item){
               var styleStr = '';
                 if(this.__getClass(item) == 'Object'){
                     for ( var p in item ){ 
                        var objVal = item[p];
                        styleStr += p + ":" +objVal + ";";
                    }
                }
                return styleStr;
           }
   });
   
  $.fn.dragDiv = function(divWrap) {
    if(!divWrap){
        divWrap = "."+$.dragDiv.prototype.defaults.classes.my_ui_widget_content;
    }
    return this.each(function() {
      var $divMove = $(this);//鼠標可拖拽區域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整個移動區域
      var mX = 0, mY = 0;//定義鼠標X軸Y軸
      var dX = 0, dY = 0;//定義div左、上位置
      var isDown = false;//mousedown標記
      if(document.attachEvent) {//ie的事件監聽，拖拽div時禁止選中內容，firefox與chrome已在css中設置過-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
    
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠標拖拽啓動
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠標滑動時的X軸
        var y = event.clientY;//鼠標滑動時的Y軸
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div動態位置賦值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠標拖拽結束
      });
      //綁定關閉事件
      var $closeBtn = $divWrap.find("."+$.dragDiv.prototype.defaults.classes.ui_widget_header_close);
      if($closeBtn && $closeBtn.length > 0){
        $closeBtn.bind("click",function(){
            $divWrap.hide();
        });
      }

    });
  };
  
})(jQuery);

//
/**
得到drag DIV html代碼，默認html根爲body

參數： {     "id":"xx",//id     "ui-widget-header-info": "xx",//dialog標題信息     "my-ui-widget-content-info":"xx",//dialog內容信息     "stable_div":""//dialog佈局信息（此處能夠指定進度條等） } 調用： showDragDivHtml({"id":"xx","ui_widget_header_info": "合同基礎信息導入進度詳情","my_ui_widget_content_info":"處理中，請稍好。。。","stable_div":dialogProgressBar1Html});//展現拖拽 */ function showDragDivHtml(options){     var defaults = {"id":"","ui_widget_header_info": "請指定標題","my_ui_widget_content_info":"請指定內容","stable_div":""};     var options =  $.extend({},defaults, options);       if(options.id){                 debugger;                 var my_ui_widget_content_style = $.dragDiv.prototype._getStyleStr($.dragDiv.prototype.defaults.styles.my_ui_widget_content);                  var ui_widget_header_style = $.dragDiv.prototype._getStyleStr($.dragDiv.prototype.defaults.styles.ui_widget_header);                 var ui_widget_header_close_style =  $.dragDiv.prototype._getStyleStr($.dragDiv.prototype.defaults.styles.ui_widget_header_close);                              var dragDivHtml = '';         dragDivHtml += '<div style="'+my_ui_widget_content_style+'" class="'+$.dragDiv.prototype.defaults.classes.my_ui_widget_content+'" id="'+$.dragDiv.prototype.defaults.classes.my_ui_widget_content+options.id+'">';             dragDivHtml += '<div style="'+ui_widget_header_style+'"  id="'+options.id+'" class="'+$.dragDiv.prototype.defaults.classes.ui_widget_header+'"><span class="ui_widget_header_info">';             dragDivHtml += options.ui_widget_header_info;//title信息             dragDivHtml += '</span><div style="'+ui_widget_header_close_style+'" class="'+$.dragDiv.prototype.defaults.classes.ui_widget_header_close+'" title="\u5173\u95ed">x</div></div>';             dragDivHtml += '<div class="'+$.dragDiv.prototype.defaults.classes.stable_div+'">'+options.stable_div+'</div>';//dialog穩定區域（暫時放進度條）             dragDivHtml += '<div class="my_ui_widget_content_info">';             dragDivHtml += options.my_ui_widget_content_info;//展現內容             dragDivHtml += '</div>';         dragDivHtml += '</div>';         $("body").prepend(dragDivHtml);         $("#"+options.id).dragDiv("."+$.dragDiv.prototype.defaults.classes.my_ui_widget_content);     } } //設置拖拽框動態信息 /** {     "id":"xx",     "my-ui-widget-content-info":"xx" } */ function setDragDivcontent_info(options){     var defaults = {"id":"","my_ui_widget_content_info":"請指定內容"};     var options =  $.extend(defaults, options);       if(options.id){         $("#my_ui_widget_content"+options.id+" .my_ui_widget_content_info").html(options.my_ui_widget_content_info);     } } //init drag div /* $(document).ready(function() {   //$("#move1").dragDiv();//拖拽整個div   //$("#move2").dragDiv(".my_ui_widget_content");//拖拽div頭部 }); */