摘要：
简述：实现拖拽，关键的地方：鼠标抬起（mouse-up）事件、鼠标落地(mouse-down)事件、对象的拖拽事件。那么在这个过程中，需要注意的点是：获取鼠标焦点在可视窗口的具体位置（x,y），以及各个浏览器的兼容，鼠标的可拖拽范围控制等！在这个过程中，我们应该注意以下几点：获取鼠标焦点在视觉窗口中的具体位置（x，y），各种浏览器的兼容性，以及鼠标拖动范围的控制！可拖动方法中有很多属性，包括是否可以复制、拖动范围控制、透明度等。由于实际情况，这里没有配置属性！
一、实现要点
1.1，让指定对象可拖拽
<span style="font-family:KaiTi_GB2312;font-size:18px;">$("div[id^='chooseCourse']").draggable();</span>本行代码表示，获取所有div的ID前缀是chooseCourse的对象，并设置其属性为可拖拽。draggable方法里面有很多的属性，包括是否可复制、拖动范围控制、透明度等等，这里因为实际情况，并没有配置任何属性！
1.2，（mouse-down）克隆当前对象，供下次拖拽
<span style="font-family:KaiTi_GB2312;font-size:18px;"> function DragObj(){
var flag=0
var x=0;
var y=0
}
var dEvt=new DragObj();
function down(obj,cloneId){
dEvt.flag=1;
dEvt.x=obj.offsetLeft;
dEvt.y=obj.offsetTop;
//复制一个当前控件，并且放到获取的位置上
var sourceNode=document.getElementById(cloneId);
var i="a";
var cloneNode=sourceNode.cloneNode(true);
var newCloneId=cloneId+i;
cloneNode.setAttribute("id",newCloneId);
sourceNode.parentNode.appendChild(cloneNode);
$("div[id='"+cloneNode.id+"']").draggable();
}</span>1.3，（mouse-up）执行鼠标抬起时的事件
在这个步骤中，需要控制拖拽范围和获取鼠标抬起时的位置：<span style="font-family:KaiTi_GB2312;font-size:18px;"> function up(obj,event){
//获取当前的位置
//获取每一行的位置，获取每一列的位置object.offsetLeft
var txt=obj.innerText;
var id=obj.id;
obj.hidden=true;
var x=event.pageX;
var y=event.pageY;
var getNode=document.elementFromPoint(x,y);
//拖动有效范围的最左边（执行弹框）
var X1 = $('#Firstone').offset().top;
var Y1= $('#Firstone').offset().left;
//拖动有效范围的最右边（执行弹框）
var X2 = $('#Seventhfive').offset().top;
var Y2= $('#Seventhfive').offset().left;
if(x<Y1 || x>Y2){
return;
}
if(y<X1 || y>X2){
return;
}
}</span>1.4，代码调用
<span style="font-family:KaiTi_GB2312;font-size:18px;">onMouseDown=down(this,id) onmouseup=up(this,event)</span>
在这个过程中要点，除了上面的之外，对于准确获取到指定一个、多个对象也是一个比较关键的地方（就跟数据库查询玩儿模糊匹配似的，唉）。在这个过程中，发现框架有些封装好的，然后自己并不知道。有了框架之后，自己又完全依赖框架，是个麻烦事！
利用框架或者语言本身提供的方法，可以大大的缩减代码，提升代码质量！