jqueryUI里拖拽排序示例分析
作者:bea
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h2><
示例参考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中拖拽排序问题的分析了,希望大家能够喜欢。
有用 | 无用
其实是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中typeof操作符和constucor属性检测
- JS实现网页滚动条感应鼠标变色的方法
- js随机生成网页背景颜色的方法
- jQuery简单实现隐藏以及显示特效
- 最流行的Node.js精简型和全栈型开发框架介绍
- jQuery对象初始化的传参方式
- JS实现文字链接感应鼠标淡入淡出改变颜色的方法
- JS实现很酷的水波文字特效实例
- jQuery中slideUp 和 slideDown 的点击事件
- jQuery实现移动 和 渐变特效的点击事件
- jQuery 回调函数(callback)的使用和基础
- 使用jQuery获得内容以及内容的属性
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- 2则自己编写的jQuery特效分享
- javascript制作网页图片上实现下雨效果
- js实现格式化金额,字符,时间的方法
- 如何减少浏览器的reflow和repaint
- 详谈javascript中DOM的基本属性