js实现Draggable拖拽功能

概述   
在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。

拖拽原理
首先要明确几个概念。
　　ource：拖拽源，要拖动的元素。
　　taerget：拖放目标，能够放入source的容器。
拖拽的动作分解如下：
　　1. onmousedown：鼠标按下事件
	2. onmousemove：鼠标移动事件
	3. onmouseup：鼠标抬起事件

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

 
 

  
  
部分实例代码：
  
  HTML部分

 
 
 
 

  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      print
     
     ?
    
    
   
   
   
   
<div class="calculator" id="drag">**********</div>  
  
  
  
  

  
  


 
 
JS部分
 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     print
    
    ?
   
   
  
  
  
  
$(".firstContent").each(function() {
	$(this).mousedown(function(event) { 
		initDiv = $(this);
		// 鼠标 与 目标元素的相对坐标 
		relPos.x = event.pageX - $(this).offset().left;
		relPos.y = event.pageY - $(this).offset().top;
		initDiv.removeClass("firstContent").addClass("borp"); 
		move = true;
		flag = true;
	}); 
	$(document).mousemove(function(event) {
		if (!move) { return false; } 
		if (!flag) { return false; }
		// 下列代码是 if(move)的 程序 
		// 目标元素随鼠标移动的坐标 
		dragPos.x1 = event.pageX - relPos.x; 
		dragPos.y1 = event.pageY - relPos.y; 
		dragPos.x2 = dragPos.x1 + initDiv. innerWidth(); 
		dragPos.y2 = dragPos.y1 + initDiv. innerHeight(); 
		initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' });
		$bg.each(function() {
			tarDiv = $(this); 
			// 目标对象的坐标 
			tarDivPos.x1 = tarDiv.offset().left; 
			tarDivPos.x2 = tarDivPos.x1 + tarDiv.width(); 
			tarDivPos.y1 = tarDiv.offset().top; 
			tarDivPos.y2 = tarDivPos.y1 + tarDiv.height(); 
			tarDivHalf = tarDiv.height()/2; //临时变量，以便于在if判断中使用 
			wHalf = tarDiv.width()/2; 
			if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf ) { 
				if(tarDiv.children().length >0 ) {return false;}// 解决重叠元素 移动到一个目标元素 
				tarDiv.removeClass("bg").addClass("bg bgColor"); 
			} else { 
				tarDiv.removeClass("bgColor"); 
			} 
		});
	}).mouseup (function(event) {
		if (!move) { return false; } 
		if (!flag) { return false; }
		initDiv.appendTo($(".bgColor"));// 利用 apppendTo 方法 使拖动元素对象添加到指定的区域。 
		initDiv.removeClass("borp").addClass("newContent").removeAttr("style"); //恢复拖拽对象初始的样式
		$(".bgColor").removeClass("bgColor").addClass("bg").removeAttr("style");;
		//initDiv.removeClass("bgColor bg").addClass("bg").removeAttr("style"); //恢复拖拽对象初始的样式
		move = false;
	});
});
  

 
 
效果图