jqueryUI里拖拽排序示例分析


Posted in Javascript onFebruary 26, 2015

示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果)

其实是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中拖拽排序问题的分析了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 #Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 #Javascript
javascript获得当前的信息的一些常用命令
Feb 25 #Javascript
javascript实现图像循环明暗变化的方法
Feb 25 #Javascript
JS往数组中添加项性能分析
Feb 25 #Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php实现简易计算器
2020/08/28 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
vue实现全匹配搜索列表内容
2019/09/26 Javascript
详解Python编程中time模块的使用
2015/11/20 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
实习公司领导推荐函
2014/05/21 职场文书
大学生个人总结范文
2015/02/15 职场文书
学校捐款活动总结
2015/05/09 职场文书
干部培训工作总结2015
2015/05/25 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Python编程编写完善的命令行工具
2021/09/15 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript