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 相关文章推荐
JS删除数组元素的函数介绍
Mar 27 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
vue模块移动组件的实现示例
May 20 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
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时间戳转换的示例
2014/03/31 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
详解python Todo清单实战
2018/11/01 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
用python解压分析jar包实例
2020/01/16 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
中专生职业生涯规划书范文
2014/01/10 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
导师就业推荐信范文
2014/05/22 职场文书
节约粮食标语
2014/06/18 职场文书
2014年变电站工作总结
2014/12/19 职场文书
党员证明信
2015/06/19 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python