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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
零基础学Python(一)Python环境安装
2014/08/20 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python基于http下载视频或音频
2018/06/20 Python
Python重新加载模块的实现方法
2018/10/16 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
高级销售员求职信
2013/10/25 职场文书
小学生暑假感言
2014/02/06 职场文书
教师评语大全
2014/04/28 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书