基于Jquery实现组件拖动的2种方法

方法一：基于jquery的原生拖动实现

e.clientX：获取当前鼠标点击位置距离浏览器窗口左边的距离
obj.offset().left：获取当前对象左边距距离浏览器窗口左边的距离

其中鼠标的三个事件分表标志了拖动的三个过程
鼠标左键按下：时获取当前鼠标的位置
鼠标左键按下并拖动：计算移动距离，并改变对象位置。对象移动后的位置（left） = 鼠标移动后的位置（client）- 鼠标第一次点击时相对对象的偏移量（diff）
鼠标左键弹起：结束

.js

var drag = $('.pendant_holder');
	// drag.draggable({ containment: "window" });
	drag.mousedown(function(event){
		if(event.which==1){//判断是否点击鼠标左键
			diffX=event.clientX-drag.offset().left;
			diffY=event.clientY-drag.offset().top;
			$(document).bind("mousemove",move);
			$(document).bind("mouseup",stop);
			console.log("dianji");
		}
		function move(even