jQuery拖拽排序插件制作拖拽排序效果(附源码下载)


Posted in Javascript onFebruary 23, 2016

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件。效果图如下:

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

效果演示         源码下载

html代码:

<h1>水平拖拽</h1>
<div class="demo">
<div class="item item1"><span>1</span></div>
<div class="item item2"><span>2</span></div>
<div class="item item3"><span>3</span></div>
<div class="item item4"><span>4</span></div>
<div class="item item5"><span>5</span></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dad.min.js"></script>
<script>
$(function(){ 
$('.demo').dad();
});
</script>
<!-- 以下信息与演示无关,可不必理会 -->
<style>
body { margin: 0; border-left: 200px solid #ccc;}
h1 { width: 1000px; margin: 40px auto; font: 32px "Microsoft Yahei";}
.demo { width: 1000px; margin: 0 auto;}
.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
</style>
<div class="menu">
<a class="cur" href="index.html">1、水平拖放</a>
<a href="index2.html">2、垂直拖放</a>
<a href="index3.html">3、多行拖放</a>
<a href="index4.html">4、指定拖动区域</a>
<a href="index5.html">5、回调函数</a>
<a href="index6.html">6、允许/禁止拖放</a>
<a href="index7.html">7、仿垃圾篓</a>
<a href="index8.html">8、仿购物车</a>
</div>

以上所述是小编给大家介绍的jQuery拖拽排序插件制作拖拽排序效果(附源码下载),希望对大家有所帮助!

Javascript 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Bootstrap响应式表格详解
May 23 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 #Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 #Javascript
全面解析Bootstrap布局组件应用
Feb 22 #Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 #Javascript
JavaScript function函数种类详解
Feb 22 #Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 #Javascript
You might like
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php实现通过ftp上传文件
2015/06/19 PHP
javascript 播放器 控制
2007/01/22 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python探索之自定义实现线程池
2017/10/27 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python实现井字棋小游戏
2020/03/04 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
好的促销活动方案
2014/08/21 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2019财务转正述职报告
2019/06/27 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript