jQueryUI写一个调整分类的拖放效果实现代码
代码 实现 一个 效果 调整 分类 拖放 JQueryUI
2023-06-13 09:14:33 时间
所以还是自己动手丰衣足食,还是坚持简单就是美的代码风格。
复制代码代码如下:
试试在iframe里嵌入一个测试页面,你可以使用鼠标拖动项目,调整分类:
当然,这并不是我要的最终效果,只能说它已经实现了一个我想要的拖放效果。我要求的在这个基础上,还要增加自动排序,位置变更后恢复之前元素bind的jQuery事件等。
代码
代码如下,如要复制,请先查看纯文本版本!
<!DOCTYPEhtml>
<html>
<head>
<title>Drag&DropTest</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<scripttype="text/javascript"
src="https://readself.com/static/js/jquery.min.js?v=52337"></script>
<scripttype="text/javascript"
src="https://readself.com/static/js/jquery-ui.min.js?v=ab482"></script>
<linkrel="stylesheet"type="text/css"
href="https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef"/>
<styletype="text/css">
li{cursor:pointer}
.menu_hover{background-color:#d0d0d0;}
#menup{margin:5px05px0;}
</style>
<body>
<ulid="menu">
<liclass="folder">
<p>Fruits</p>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Banana</li>
</ul>
</li>
<liclass="folder"><p>Vegetables</p>
<ul>
<li>Tomato</li>
<li>Potato</li>
<li>Cucumber</li>
</ul>
</li>
<liclass="folder"><p>Meet</p>
<ul>
<li>Beaf</li>
<li>Pork</li>
<li>Chicken</li>
</ul>
</li>
</ul>
<script>
$("#menuli").disableSelection();
$("li",$("#menuul")).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.folderp").click(function(){
$(this).next().toggle();
});
</script>
相关文章
- 从零开始实现一个简单的低代码编辑器
- 用java代码实现九九乘法表
- D2C 设计稿转代码是怎么实现的?自己做一个可行吗?
- 手把手教你从零实现一个深度学习框架(附代码实现)
- Javascript实现右下角在线客服弹窗效果代码 - 网站网页在线客服源码教程
- [代码笔记]php+mysql实现模糊搜索关键词功能
- 实现不同编程语言间的自由代码转换需要注意些什么?【经验分享】
- 发一个自己用JS写的实用看图工具实现代码
- ASP.Net图片存入数据库的实现代码
- javascript写的一个链表实现代码
- 一个鼠标移动滑出层效果的实现代码
- asp.net中3种验证码示例(实现代码)(数字,数字字母混和,汉字)
- javascript仿qq界面的折叠菜单实现代码
- 用表格输出1-1000之间的数字实现代码(附特效)
- 20行代码实现的一个CSS覆盖率测试脚本
- js、jquery图片动画、动态切换示例代码
- C#实现关机重启及注销实例代码