jQueryEasyUI基础教程之Draggable和Droppable.docxVIP

jQuery-EasyUI基础教程之Draggable和Droppable课程目标掌握Draggable的三种不同方式掌握Droppable的开发学会开发可拖拽页面DraggableDraggable简介EasyUI的Draggable控件可以帮助我们快速的开发可以拖拽的页面，用户使用起来会更加的方便快捷。效果如图：开发Draggable程序方式一：img id=image1 alt=这是一幅图片 class=easyui-draggable src=/ui/images/shirt1.gif/只需要简单的给HTML标签添加一个指定的class样式即可创建一个可拖拽的控件。效果如下图：这是一种最简单的实现方式，拖动图片时原位置则不再有图片 。Tip：参照”初识jQuery-EasyUI”文章中的几种不同表示方法，大家会发现还有以下实现方式：HTML代码：img id=image1 alt=这是一幅图片 src=/ui/images/shirt1.gif/JS代码：$(#image1).draggable(); 方式二：拖动图片时原位置仍然保持图片。HTML代码保持不变，只需要在JS代码中加入一句话就可以了：$(#image2).draggable({proxy:clone}); 效果如下：方式三：拖动图片时显示自定义内容。HTML代码保持不变，只需要在JS代码中加入自定义的内容就可以了：$(#image3).draggable({proxy:function(source){var p = $(div class=cloneDiv/div);p.html($(source).attr(alt)).appendTo(body);return p;}}); 效果如下：Drappable常用属性属性名属性值类型描述默认值handleselector开始拖动的句柄。nullproxystring,function在拖动的时候使用的代理元素，当使用clone的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。nullrevertboolean如果设置为true，在拖动停止时元素将返回起始位置。falsecursorstring拖动时的CSS指针样式。movedisabledboolean如果设置为true，则停止拖动。falseaxisstring定义元素移动的轴向，可用值有：v或h，当没有设置或设置为null时可同时在水平和垂直方向上拖动。nulldelaynumber定义必须拖拽并等待指定ms后拖拽才开始0参考jQuery EasyUI的API。代码如下：$(#image3).draggable({revert : true,cursor: help,disabled : false,proxy:function(source){var p = $(div class=cloneDiv/div);p.html($(source).attr(alt)).appendTo(body);return p;}});script$(function() {$(#draggable).draggable({axis : v,});$(#draggable2).draggable({axis : h});$(#draggable3).draggable({delay : 1000});});/scripth3沿着轴约束运动：/h3div id=draggable class=draggable ui-widget-contentp只能垂直拖拽/p/divdiv id=draggable2 class=draggable ui-widget-contentp只能水平拖拽/p/divh3 style=clear:both;沿着轴约束运动：/h3div id=draggable3 class=draggable ui-widget-contentp不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始/p/divdiv class=easyui-draggable data-options=handle:#title style=clear:both;width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10pxdiv id=title style=padding:5px;background:#ccc;color:#fffTitle/div/div效果如下：Draggable常用方法方法名方法参数描述optionsnone返回属性对象。proxynone如果代理属性被设置则