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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jQuery侧边栏实现代码
May 06 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue特效之翻牌动画
Apr 20 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
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python输出指定月份日历的方法
2015/04/23 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
商场活动策划方案
2014/01/24 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
导游词开场白
2015/01/31 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技