刚接触的时候，分不清draggable和droppable的区别，瞎弄了一会，其实很简单，draggable就是“拖”的功能，droppable就是“放”的功能。

一、先上一个简单例子 1、代码

<></script>
<></script>
<>
  <p>Drag me to my target--from ifxoxo.com</p>
</div>
<>
  <p>Drop here  -- from ifxoxo.com</p>
</div>

<script>
  $
    // 初始化#draggable 可以被拖动
    $. 
   // 初始化，有东西拖到#droppable时，弹出alert窗口  
   $.  
      dropevent
         "has drop!--from ifxoxo.com");
      }
   
 
  </script>

2、截图/

拖动 #draggable之前的截图

把#draggable 丢到 #droppable 之后的截图

二、具体用法 1、需要加载的JS ，jquery 需要在jquery-ui之前

<></script>
<></script>

2、页面上的HTML (1)拖动的element

 //可以是任何html元素，一个图片，一个div，或者一个 A 标签
 >
   <p> 这是一个可以拖动的元素--from ifxoxo.com</p>
 >

(2) 如果需要指定放下到哪里，则需要写一个接受的元素

  //下面是一个DIV
 >
     <p>可以拖动到这里来  -- from ifxoxo.com</p>
 >

3、主要的JS代码 （1）初始化draggable（可拖动）

draggable()函数有许多参数和用法，详见二、4

    // 初始化#draggable 可以被拖动
    $.
       //这里是一些参数
   

（2）初始化#droppable，当有东西丢下时，执行

droppable()函数有许多参数和用法(详见二、5)

    $.  
      dropevent
       "has drop!--from ifxoxo.com");
      }
   

4、draggable()函数的其他参数 （1）回调函数

有start, stop, drag等事件，这些函数都接受两个参数：event和ui。
start: 拖动开始, 指鼠标按下, 开始移动.
drag: 拖动过程中鼠标移动.
stop: 拖动结束.

          //初始化时设置事件.
          $.
             startevent
             dragevent
             event
         

（2）常见参数

addClasses: [类型]Boolean(布尔值) [默认值]true
是否给draggable元素增加 ui-draggable这个css的class
axis： [类型]String [支持] ‘x’, ‘y’, false
控制元素 只能沿 X轴|Y轴 移动
containment：[类型]选择器, 元素, 字符串, 数组
只能在选择器约束的元素内拖动
delay：[类型]整数, 单位是毫秒
可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时
还有：distance，distance，handle，helper，opacity （详见 四、）

    $.
            addClasses
            axis
            containment //parent: 只能在父容器内拖动 
            delay
            opacity //被拖到时的不透明度
   

5、 droppable()函数的参数 （1）函数