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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
详解JS中的attribute属性
Apr 25 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
vue-cli3+ts+webpack实现多入口多出口功能
May 30 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php反射应用示例
2014/02/25 PHP
php 购物车完整实现代码
2014/06/05 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python虚拟环境项目实例
2017/11/20 Python
详解如何使用Python编写vim插件
2017/11/28 Python
图解Python变量与赋值
2018/04/03 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
爱护公物标语
2014/06/24 职场文书
2014年班级工作总结
2014/11/14 职场文书
煤矿安全保证书
2015/02/27 职场文书
公司年夜饭通知
2015/04/25 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
Win11查看设备管理器
2022/04/19 数码科技