jQuery-EasyUI基础教程之Draggable和Droppable.docx

jQuery-EasyUI基础教程之Draggable和Droppable课程目标 掌握Draggable的三种不同方式 掌握Droppable的开发 学会开发可拖拽页面DraggableDraggable简介EasyUI的Draggable控件可以帮助我们快速的开发可以拖拽的页面，用户使用起来会更加的方便快捷。效果如图：开发Draggable程序方式一：1. 只需要简单的给HTML标签添加一个指定的class样式即可创建一个可拖拽的控件。效果如下图：这是一种最简单的实现方式，拖动图片时原位置则不再有图片 。Tip：参照”初识jQuery-EasyUI”文章中的几种不同表示方法，大家会发现还有以下实现方式：HTML代码：1. JS代码：1. $(#image1).draggable(); 方式二：拖动图片时原位置仍然保持图片。HTML代码保持不变，只需要在JS代码中加入一句话就可以了：1. $(#image2).draggable(2. proxy:clone3. ); 效果如下：方式三：拖动图片时显示自定义内容。HTML代码保持不变，只需要在JS代码中加入自定义的内容就可以了：1. $(#image3).draggable(2. proxy:function(source)3. var p = $();4. p.html($(source).attr(alt).appendTo(body);5. return p;6. 7. ); 效果如下：Drappable常用属性属性名属性值类型描述默认值handleselector开始拖动的句柄。nullproxystring,function在拖动的时候使用的代理元素，当使用clone的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。nullrevertboolean如果设置为true，在拖动停止时元素将返回起始位置。falsecursorstring拖动时的CSS指针样式。movedisabledboolean如果设置为true，则停止拖动。falseaxisstring定义元素移动的轴向，可用值有：v或h，当没有设置或设置为null时可同时在水平和垂直方向上拖动。nulldelaynumber定义必须拖拽并等待指定ms后拖拽才开始0参考jQuery EasyUI的API。代码如下：1. $(#image3).draggable(2. revert : true,3. cursor: help,4. disabled : false,5. proxy:function(source)6. var p = $();7. p.html($(source).attr(alt).appendTo(body);8. return p;9. 10. );1. 2. $(function() 3. $(#draggable).draggable(4. axis : v,5. );6. $(#draggable2).draggable(7. axis : h8. );9.10. $(#draggable3).draggable(11. delay : 100012. );13. );14. 15.16. 沿着轴约束运动：17. 18. 只能垂直拖拽19. 20. 21. 只能水平拖拽22. 23. 沿着轴约束运动：24. 25. 不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始26. 27. 28. Title29. 效果如下：Draggable常用方法方法名方法参数描述optionsnone返回属性对象。proxynone如果代理属性被设置则返回该拖动代理元素。enablenone允许拖动。disablenone禁止拖动。Draggable常用事件事件名事件参数描述onBeforeDrage在拖动之前触发，返回false将取消拖动。onStartDrage在目标对象开始被拖动时触发。onDrage在拖动过程中触发，当不能再拖动时返回false。onStopDrage在拖动停止时触发。DroppableDroppable简介EasyUI的Droppable控件用于定义可以接受哪些拖动的控件。开发Dropable程序1. 2. $(function() 3. $( #dd ).droppable(4. onDrop: function(event, ui) 5. $(this).css(color,red);6. 7. );8. );9. 10.11. 12. d113. 14. 15. d216. 17. dd 18.效果如下：Tip：只有当d1,d3拖动到dd中时才会触发onDrop事件，即dd中文字的颜色才会变成红色。Droppable常用属性属性名属性值类型描述默认值acceptselector确定哪些可拖拽元素将被接受。nulldisabledboolean如果为true，则禁止放置。falseDroppable常用方法方法名方法参数描述onDragEntere,source在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。onDragOvere,source在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。onDragLeavee,source在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。onDrope,source在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素。Droppable常用事件事件名事件参数描述optionsnone返回属性对象。enablenone启用放置功能。disablenone禁用放置功能。参考jQuery EasyUI的API。案例一：代码如下：1. $( #dd ).droppable(2. onDrop: function(event, ui) 3. $(this).css(color,red);4. ,5. onDragEnter:function()6. $(this).css(background-color,yellow);7. ,8. onDragLeave:function()9. $(this).css(background-color,pink);10. 11. );效果如下：案例二：代码如下：1. 2. $(function()3. var indicator = $().appendTo(body);4. $(.drag-item).draggable(5. revert:true,6. deltaX:0,7. deltaY:08. ).droppable(9. onDragOver:function(e,source)10. indicator.css(11. display:block,12. left:$(this).offset().left-10,13. top:$(this).offset().top+$(this).outerHeight()-514. );15. ,16. onDragLeave:function(e,source)17. indicator.hide();18. ,19. onDrop:function(e,source)20. $(source).insertAfter(this);21. indicator.hide();22. 23. );24. );25. 26.27. Change Items O