jquery的拖拽UI功能

以下是原始的实现方式，使用如下链接方式可实现封装：

 http://www.cr173.com/html/11969_1.html

 

3C网站的实现jquery拖拽的实现方式：（有样例）

http://jqueryui.com/droppable/

1、拖拽原始实现算法：

       通过mousedown,up,move 设置drag标示位实现拖动算法。

   

2、实现原理：

    

 Jquery的鼠标键拖动原理

一、知识点：

1、 定义一个drag变量，作为是否可以拖动的条件。

2、 Offset，返回的对象包含两个整型的属性：left和top，此方法只对可见元素有效。

3、 Mousedown的时候，获取当前坐标，减去对象坐标，取得距离

4、 mouseMove的时候，先进行判断，获取当前坐标，减去mouseDown获取的距离。得到移动的坐标，将此坐标通过CSS写到函数里面即可。

5、 mouseUp的时候，将drag设置为false，不可拖动即可。

6、 var e = e| window.event ,用来判断浏览器？

7、 讲上面的 mouseMove换成mouseTOUCH即可实现手机上的移动。

8、关键点：css的样式，注意position需要设置为absolute,绝对坐标方式。

    

 

3、拖拽实现html源代码：（加入了jquery的内容）

     

拖拽1

 编辑环境：

     dreamveaver cs5环境，保存后刷新页面。