文档详情

jQueryEasyUI基础教程之Draggable和Droppable.docx

发布:2018-02-03约4.39千字共13页下载文档
文本预览下载声明
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如果代理属性被设置则
显示全部
相似文档