jquery拖动插件(jquery.drag)使用介绍


Posted in Javascript onJune 18, 2013
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery Dynamic Drag'n Drop</title> 
<script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><style type="text/css"></style> 
<script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script> 
<style> 
body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 16px; 
margin-top: 10px; 
} 
ul { 
margin: 0; 
} 
#contentWrap { 
width: 700px; 
margin: 0 auto; 
height: auto; 
overflow: hidden; 
} 
#contentTop { 
width: 600px; 
padding: 10px; 
margin-left: 30px; 
} 
#contentLeft { 
float: left; 
width: 400px; 
} 
#contentLeft li { 
list-style: none; 
margin: 0 0 4px 0; 
padding: 10px; 
background-color:#00CCCC; 
border: #CCCCCC solid 1px; 
color:#fff; 
} #contentRight { 
float: right; 
width: 260px; 
padding:10px; 
background-color:#336600; 
color:#FFFFFF; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(function() { 
$("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() { 
var id=""; 
$("ul.ui-sortable li").each(function(){ 
id+=$(this).attr("id")+"<br/>"; 
}) 
$("#contentRight").html(id); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body style="cursor: auto;"> 
<div id="contentWrap"> 
<div id="contentLeft"> 
<ul class="ui-sortable"> 
<li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">3. Returned array can be found at the right</li> 
<li id="recordsArray_2">2. Dragging changes the opacity of the item</li> 
<li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">1. Once dropped, an Ajax query is activated</li> 
<li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">4. It is very very easy</li> 
<li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">5. It is very very easy</li> 
<li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">6. It is very very easy</li> 
<li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">7. It is very very easy</li> 
</ul> 
</div> 
<div id="contentRight"></div> 
</div> 
</body></html>

demo地址
Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
给Function做的OOP扩展
May 07 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 #Javascript
Jquery事件的连接使用示例
Jun 18 #Javascript
jquery属性过滤选择器使用示例
Jun 18 #Javascript
js实现的切换面板实例代码
Jun 17 #Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 #Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 #Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 #Javascript
You might like
PHP 组件化编程技巧
2009/06/06 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php实现的顺序线性表示例
2019/05/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python素数检测实例分析
2015/06/15 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
详解Python3 基本数据类型
2019/04/19 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python3.6编写的单元测试示例
2019/08/17 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
美国时尚在线:Showpo
2017/09/08 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
毕业班联欢会主持词
2014/03/27 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
先进党员事迹材料
2014/12/24 职场文书
家长通知书家长意见
2015/06/03 职场文书
医院消毒隔离制度
2015/08/05 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL