jqueryUI里拖拽排序示例分析
2015-02-26 00:00
806 查看
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果)
其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序
这个是html代码
这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序,橙色代码部分不太理解,好像没用的样子
另外值得一提的是
.ui-state-default貌似是拖拽时内置的一些类,对应的还有
ui-state-hover等分别对应当有可以拖拽的对象在拖拽时,和拖拽到容器时的效果,本文代码没有体现。
以上就是关于jQueryUI中拖拽排序问题的分析了,希望大家能够喜欢。
其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序
这个是html代码
<div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h2><a href="#">T-Shirts</a></h2> <div> <ul> <li>Lolcat Shirt</li> <li>Cheezeburger Shirt</li> <li>Buckit Shirt</li> </ul> </div> <h2><a href="#">Bags</a></h2> <div> <ul> <li>Zebra Striped</li> <li>Black Leather</li> <li>Alligator Leather</li> </ul> </div> <h2><a href="#">Gadgets</a></h2> <div> <ul> <li>iPhone</li> <li>iPod</li> <li>iPad</li> </ul> </div> </div> </div> <div id="cart"> <h1 class="ui-widget-header">Shopping Cart</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">Add your items here</li> </ol> </div> </div>
这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序,橙色代码部分不太理解,好像没用的样子
$(function () { $("#catalog").accordion(); $("#catalog li").draggable({ appendTo: "body", helper: "clone", connectToSortable: "#cart ol" }); $("#cart ol").sortable({ items: "li:not(.placeholder)", connectWith: "li", sort: function () { $(this).removeClass("ui-state-default"); }, over: function () { //hides the placeholder when the item is over the sortable $(".placeholder").hide(); }, out: function () { if ($(this).children(":not(.placeholder)").length == 0) { //shows the placeholder again if there are no items in the list $(".placeholder").show(); } } }); });
另外值得一提的是
.ui-state-default貌似是拖拽时内置的一些类,对应的还有
ui-state-hover等分别对应当有可以拖拽的对象在拖拽时,和拖拽到容器时的效果,本文代码没有体现。
以上就是关于jQueryUI中拖拽排序问题的分析了,希望大家能够喜欢。
相关文章推荐
- jqueryUI里拖拽排序示例分析
- 关于二级目录拖拽排序的实现(源码示例下载)
- mysql 关键词相关度排序方法详细示例分析
- dhtmlxTree目录树增加右键菜单及拖拽排序+源码示例下载
- 转载:javascript 拖拽排序,简洁示例备忘
- react.js组件实现拖拽复制和可排序的示例代码
- android的RecyclerView实现拖拽排序和侧滑删除示例
- 关于二级目录拖拽排序的实现(源码示例下载)
- mysql 关键词相关度排序方法详细示例分析
- jquery应用-图片拖拽排序
- [导入]随机排序分页处理示例
- 三种简单排序的对比与分析(未完待续)
- 免费使用Anole示例——动态创建带有排序功能和下拉列表风格的组合框
- “无法解决 equal to 操作的排序规则冲突。”的错误分析和解决方法
- Tcpdump命令的使用与示例——linux下的网络分析
- PHP+MySQL分页显示示例分析
- mfc,示例 ctrlbars 程序运行流程分析
- GLDog对NVIDIA SDK的glsl_dispersion分析示例