jQueryUI写一个调整分类的拖放效果实现代码


Posted in Javascript onMay 10, 2012

所以还是自己动手丰衣足食,还是坚持简单就是美的代码风格。

jQueryUI写一个调整分类的拖放效果实现代码
试试在iframe里嵌入一个测试页面,你可以使用鼠标拖动项目,调整分类:

当然,这并不是我要的最终效果,只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上,还要增加自动排序,位置变更后恢复之前元素bind的jQuery事件等。

代码

代码如下,如要复制,请先查看纯文本版本!

<!DOCTYPE html> 
<html> 
<head> 
<title>Drag & Drop Test</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" 
src="https://readself.com/static/js/jquery.min.js?v=52337"></script> 
<script type="text/javascript" 
src="https://readself.com/static/js/jquery-ui.min.js?v=ab482"></script> 
<link rel="stylesheet" type="text/css" 
href="https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef" /> 
<style type="text/css"> 
li {cursor: pointer} 
.menu_hover {background-color: #d0d0d0;} 
#menu p{margin: 5px 0 5px 0;} 
</style> 
<body> 
<ul id="menu"> 
<li class="folder"> 
<p>Fruits</p> 
<ul> 
<li>Apple</li> 
<li>Pear</li> 
<li>Banana</li> 
</ul> 
</li> 
<li class="folder"><p>Vegetables</p> 
<ul> 
<li>Tomato</li> 
<li>Potato</li> 
<li>Cucumber</li> 
</ul> 
</li> 
<li class="folder"><p>Meet</p> 
<ul> 
<li>Beaf</li> 
<li>Pork</li> 
<li>Chicken</li> 
</ul> 
</li> 
</ul> <script> 
$('#menu li').disableSelection(); 
$('li', $('#menu ul')).draggable({revert: 'invalid', helper: 'clone'}); 
$('#menu .folder').droppable({ 
hoverClass: "menu_hover", 
drop: function(event, ui){ 
if(ui.draggable.parents('.folder').get(0) == $(this).get(0)) 
return ; 
$('ul', this).append(ui.draggable.clone()); 
ui.draggable.remove(); 
$('li', this).draggable({remove: 'invalid', helper: 'clone'}); 
} 
}); 
$('#menu .folder p').click(function(){ 
$(this).next().toggle(); 
}); 
</script>
Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
js实现select下拉框菜单
Dec 08 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
基于jQuery捕获超链接事件进行局部刷新代码
May 10 #Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
jQuery 图片切换插件(代码比较少)
May 07 #Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 #Javascript
js查错流程归纳
May 04 #Javascript
iphone safari不支持position fixed的解决方法
May 04 #Javascript
JavaScript之自定义类型
May 04 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php防注
2007/01/15 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
js动态获取时间的方法分析
2019/08/02 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python 自定义对象的打印方法
2019/01/12 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
物业保安员岗位职责
2014/03/14 职场文书
2015年企业新年寄语
2014/12/08 职场文书
采购员岗位职责范本
2015/04/07 职场文书
律政俏佳人观后感
2015/06/09 职场文书
CAD实训总结范文
2015/08/03 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript