编程 Javascript

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 相关文章推荐

List Installed Software Features

Jun 11 Javascript

js控制网页前进和后退的方法

Jun 08 Javascript

js实现图片上传并正常显示

Dec 19 Javascript

JS递归遍历对象获得Value值方法技巧

Jun 14 Javascript

浅谈JQ中mouseover和mouseenter的区别

Sep 13 Javascript

AngularJS Phonecat实例讲解

Nov 21 Javascript

webpack学习教程之前端性能优化总结

Dec 05 Javascript

react router4+redux实现路由权限控制的方法

May 03 Javascript

swiper 自动图片无限轮播实现代码

May 21 Javascript

ligerUI的ligerDialog关闭刷新的方法

Sep 27 Javascript

SpringBoot在yml配置文件中配置druid的操作

Nov 16 Javascript

微信小程序实现下拉加载更多商品

Dec 29 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