jquery写弹窗等拖拽功能

<div class="dialogBorder" id="element"></div>
$(document).ready(function () {
        $("#element").draggable()
    })

首先引入依赖

move.js

(function(){
	function b(t,s){
		this.t = t;
		this.c = t.find(s.move).first();
		this.cs = t.find(s.toggleBtn).first();
		this.BEl = t.find(s.borderEl).first();
		this.m = false;
		this.s = false;
		this.hide = 5;
		this.spaceT = s.spaceT;
		this.spaceL = s.spaceL;
		this.spaceR = s.spaceR;
		this.spaceB = s.spaceB;
		this.init();
	}
	b.prototype = {
		init:function(){
			let t = this;
			t.box_sizing = t.t.css('box-sizing');
			t.height = t.t.outerHeight();
			t.width = t.t.outerWidth();
			t.w_width = $(window).width();
			t.w_height = $(window).height();

			t.t.css({
				'max-height':t.w_height-t.c_height,
				'max-width':t.w_width-t.c_width,
				'position':'fixed',
				'top': t.w_height - t.spaceB- t.height - 5,
				'left': t.w_width/2 - t.width/2
			});

			t.STop = t.w_height - t.spaceB- t.height - 5;
			t.SLeft = t.w_width/2 - t.width/2;
			
			if(t.box_sizing != 'border-box'){
				t.c_width = t.width - t.t.width();
				t.c_height = t.height - t.t.height();
			}else{
				t.c_width = 0;
				t.c_height = 0;
			}
			
			t.move();
			t.toggle();
		},
		move:function(){
			let t = this;
			t.c.on('mousedown',function(e){
				// console.log('move    mousedown')
				t.m = true;
				t.left = t.t.offset().left;
				t.top = t.t.offset().top;
				t.x = e.pageX;
				t.y = e.pageY;
				t.height = t.t.outerHeight();
				t.width = t.t.outerWidth();
				$(document).on('mousemove',function(e){
					console.log('document    mousemove')
					t.left2 = t.left+e.pageX-t.x;
					t.top2 = t.top+e.pageY-t.y;
					if(t.left2 <= t.spaceL ){
						t.left2 = t.spaceL;
					}else if(t.left2 >= t.w_width-t.width-t.spaceR){
						t.left2 = t.w_width-t.width-t.spaceR;
					}
					if(t.top2 <= t.spaceT + 15){
						t.top2 = t.spaceT+ 15;
					}else if(t.top2 >= t.w_height-t.height-t.spaceB){
						t.top2 = t.w_height-t.height-t.spaceB;
					}
					t.t.css({'top':t.top2,'left':t.left2});
					return false;
				});
				$(document).on('mouseup',function(e){
					// console.log('document    mouseup')
					$(document).off('mousemove');
					$(document).off('mouseup');
					t.m = false;
					t.top = t.t.offset().top - $(window).scrollTop();
					t.left = t.t.offset().left - $(window).scrollLeft();
					if(t.top <= t.w_height - t.spaceB - t.height && t.leave(e.pageX,e.pageY)){
						t.bottom_animate();
					}
				});
				return false;
			});
			t.t.on('mouseleave',function(){
				// console.log('move    mouseleave')
				$(document).off('mousemove');
				if(!t.t.is(":animated") && !t.m && !t.s){
					t.top = t.t.offset().top;
					if(t.top >= t.w_height - t.spaceB - t.height){
						t.bottom_animate();
					}
				}
			});
		},
		toggle(){
			let t = this;
			t.cs.on('click',function(e){
				let status = t.cs.attr('data-status'),
					h1 = t.w_height - t.spaceB - 5,
					arr = [h1, t.STop];

				t.cs.attr('data-status', Number(!Number(status)));
				t.t.animate({
					top:arr[Number(!Number(status))],
					left: t.SLeft
				});
				return false;
			});
		},
		leave:function(xx,yy){
			let t = this;
			if(xx >= t.t.offset().left && xx <= t.t.offset().left+t.width && yy >= t.t.offset().top && yy <= t.t.offset().top+t.height){
				return false;
			}else{
				return true;
			}
		},
		// top_animate:function(){
		// 	let t = this;
		// 	t.t.animate({top:t.spaceT},300,function(){});
		// },
		// left_animate:function(){
		// 	let t = this;
		// 	t.t.animate({left:t.spaceL},300,function(){});
		// },
		// right_animate:function(){
		// 	let t = this;
		// 	t.t.animate({left:(t.w_width-t.spaceR - t.width)},300,function(){});
		// },
		bottom_animate: function(){
			let t = this;
			t.t.animate({top:(t.w_height-t.spaceB - 5)},300,function(){});
			t.cs.attr('data-status',0)
		}
	};
	let y = {
		move : '.move-bar',
		toggleBtn : '.folder-btn',
		spaceT:0,
		spaceL:0,
		spaceR:0,
		spaceB:0,
	};
	$.fn._move = function(bg){
		$.extend(y,bg);
		$(this).each(function(){
			new b($(this),y);
		});
	}
})(jQuery);