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日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
Javascript writable特性介绍
Feb 27 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
js如何获取网页所有图片
May 12 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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多种序列化与反序列化的方法
2013/06/06 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python制作爬虫采集小说
2015/10/25 Python
python实现词法分析器
2019/01/31 Python
详解Python3注释知识点
2019/02/19 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
《和田的维吾尔》教学反思
2014/04/14 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
先进班组事迹材料
2014/12/25 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
SQL Server表分区删除详情
2021/10/16 SQL Server
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS