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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
javascript常用的正则表达式实例
May 15 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
ECMAScript6--解构
2017/03/30 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
JS回调函数深入理解
2019/10/16 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python机器人运动范围问题的解答
2019/04/29 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python __slots__的使用方法
2020/11/15 Python
《狮子和兔子》教学反思
2014/03/02 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
小学英语教学随笔
2015/08/14 职场文书
2019年教师入党申请书
2019/06/27 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Redis命令处理过程源码解析
2022/02/12 Redis
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL