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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
浅谈react前后端同构渲染
Sep 20 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
php中curl和file_get_content的区别
2014/05/10 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
eclipse php wamp配置教程
2016/06/30 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
Javascript中神奇的this
2016/01/20 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
深入学习Python中的装饰器使用
2016/06/20 Python
判断网页编码的方法python版
2016/08/12 Python
python使用tkinter实现简单计算器
2018/01/30 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python实现定时发送邮件
2020/12/23 Python
绿化工程实施方案
2014/03/17 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2014年环保局工作总结
2014/12/11 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书