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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
基于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
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
jquery 上下滚动广告
2009/06/17 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
vue组件学习教程
2017/09/09 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python通过索引遍历列表的方法
2015/05/04 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python 贪心算法的实现
2020/09/18 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
物流合作计划书
2014/01/10 职场文书
市场部管理制度
2014/02/02 职场文书
公益广告宣传方案
2014/02/28 职场文书
体育节口号
2014/06/19 职场文书
2014年村官工作总结
2014/11/24 职场文书
档案工作个人总结
2015/03/03 职场文书
开学第一天的感想
2015/08/10 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python