query ui draggable,droppable

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

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
2、页面上的HTML
(1)拖动的element

 //可以是任何html元素，一个图片，一个div，或者一个 A 标签
  <div id="draggable" class="ui-widget-content">
   <p> 这是一个可以拖动的元素--from ifxoxo.com</p>
  </div>
(2) 如果需要指定放下到哪里，则需要写一个接受的元素

  //下面是一个DIV
  <div id="droppable" class="ui-widget-header">
     <p>可以拖动到这里来  -- from ifxoxo.com</p>
  </div>
3、主要的JS代码
（1）初始化draggable（可拖动）

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

    // 初始化#draggable 可以被拖动
    $( "#draggable" ).draggable({
       //这里是一些参数
    });
（2）初始化#droppable，当有东西丢下时，执行

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

    $( "#droppable" ).droppable({   
      drop: function( event, ui ) { 
        alert("has drop!--from ifxoxo.com");
      }
    });
4、draggable()函数的其他参数
（1）回调函数

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

          //初始化时设置事件.
          $('.selector').draggable({
             start: function(event, ui){ alert(this); },
             drag: function(event, ui) { alert(this); },
             stop: function(event, ui) { alert(this); }
          });
（2）常见参数

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

    $('.selector').draggable({ 
            addClasses: true,
            axis: 'x',
            containment: 'parent',  //parent: 只能在父容器内拖动 
            delay: 500,
            opacity: 0.35,  //被拖到时的不透明度
   });
5、 droppable()函数的参数
（1）函数

activate：在允许的draggable对象开始拖动时触发.
deactivate：在允许的draggable对象停止拖动时触发.
over：在允许的draggable对象”经过”这个droppable对象时触发
out：在允许的draggable对象离开 这个droppable对象时触发
drop：在允许的draggable对象填充进这个droppable对象时触发.

       $('.selector').droppable({  
                activate: function(event, ui) { ... },
                deactivate: function(event, ui) { ... },
                over: function(event, ui) { ... },
                out: function(event, ui) { ... },
                drop: function(event, ui) { ... }  
       });
(2)常见参数

accept ：[类型]Selector, Function [默认值]‘*’
允许被放下来的元素.
hoverClass :[类型]String [默认值]false
一个被允许的draggable对象悬停在droppable对象上时添加的class

还有：activeClass，greedy，scope，tolerance （详见 五、）

            $('.selector').droppable({ 
                   accept: '#someid',
                   hoverClass: 'drophover'
            });