jquery ui draggable,droppable 应用

http://jqueryui.com/draggable/

具体用法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的classaxis： [类型]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'            });