jquery列表拖动排列(由项目提取相当好用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最好的jquery列表拖动排列自定义拖动层排列</title>
<meta name="description" content="jquery列表模块拖动层，当点击或拖动列表时，可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dragsort-0.4.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial;font-size:12pt;color:#333;}
h1{font-size:16pt;}
h2{font-size:13pt;}
/* demo */
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
/* dragfunction */
.dragfunction{margin:40px 0 0 0;}
.dragfunction dt{height:30px;font-weight:800;}
.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}
/* dragsort */
.dragsort-ver li{height:30px;line-height:30px;}
.dragsort{width:350px;list-style-type:none;margin:0px;}
.dragsort li{float:left;padding:5px;width:100px;height:100px;}
.dragsort div{width:90px;height:50px;border:solid 1px black;background-color:#E0E0E0;text-align:center;padding-top:40px;}
.placeHolder div{background-color:white!important;border:dashed 1px gray!important;}
</style>
</head>
<body>
<div class="demo">
<h1>jQuery列表拖动排列演示</h1>
<h2>简单的一组列表:</h2>
<ul class="dragsort-ver">
<li>你猜</li>
<li>你不猜</li>
<li>你不猜你不猜</li>
<li><input type="checkbox" name="intro_fields[]" value="猜猜"/>猜猜</li>
<li>你猜不猜</li>
<li>你猜不猜不猜</li>
<li>你不猜不猜</li>
</ul>
<br/>
<script type="text/javascript">
$("ul:first").dragsort();
</script>
<h2>两组列表拖放:(无限组拖放)</h2>
<ul class="dragsort" id="list2" style="float:right;">
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
</ul>
<ul class="dragsort" id="list1">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
</ul>
<!-- 排序保存在这里可以检索服务器上的回传 -->
<input name="list1SortOrder" type="hidden" />
<script type="text/javascript">
$("#list1, #list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
scrollSpeed: 5
});
function saveOrder() {
var data = $("#list1 li").map(function(){
return
$(this).children().html();
}).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
<div style="clear:both;"></div>
<h2>Usage</h2>
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/>
<br/>
<dl class="dragfunction">
<dt>dragSelector</dt>
<dd>CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。</dd>
<dt>dragSelectorExclude</dt>
<dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd>
<dt>dragEnd</dt>
<dd>拖动结束后将被调用的回调函数.</dd>
<dt>dragBetween</dt>
<dd>设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。</dd>
<dt>placeHolderTemplate</dt>
<dd>拖动列表的HTML部分。默认值是"<li></li>".</dd>
<dt>scrollContainer</dt>
<dd>CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.</dd>
<dt>scrollSpeed</dt>
<dd>一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".</dd>
</dl>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI sortable()实现拖动排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
update : function(event, ui){ //更新排序之后
alert($(this).sortable("toArray"));
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" id="1">第1项</li>
<li class="ui-state-default" id="2" >第2项</li>
<li class="ui-state-default" id="3">第3项</li>
</ul>
</body>
</html>
源码下载
相关推荐
-
利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值
原来我们要写一个客户端的特效,要写一两天的JavaScript,然后再调试一两天,才可以看见端倪.现在我们只要使用JQuery和他的 plugin,就可以任意的实现我们脑海中的特效,感谢他们的编写者对人类的贡献(一百个西红柿砸过来..............). 我今天实现的需求是一个需要从列表页面中选择要导出到word中的列,然后在将选中列的内容导出到word中,同时为了增加通用性,列的个数不是固定的,也就是说这张表格可能是4列,也可能是5列,待选择的列数目不固定.例如:有下面的一张表格,然后
-
基于jquery的鼠标拖动效果代码
记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素. 这两天看了一些东西,发现不需要设这个布尔变量; 实现过程: 按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数. 复制代码 代码如下: //按下鼠标并移动时(拖动),调用的函数: function startSelection(event){ -- } //解除移动时的处理函数: function cancelSelec
-
JQuery 表格操作(交替显示、拖动表格行、选择行等)
JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!-- $(function(){ //交替显示行 $('#alternation').click(function(){ $('tbody > tr:odd', $('#example')).toggleClass('alternatio
-
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个<div> 元素: <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class=&quo
-
jquery div拖动效果示例代码
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
jquery sortable的拖动方法示例详解
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属
-
jquery列表拖动排列(由项目提取相当好用)
代码一预览: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
-
jQuery列表拖动排列具体实现
实现这个很简单 第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js. 第二,代码 复制代码 代码如下: <h2>两组列表拖放:</h2> <ul class="dragsort" id="list2" style="float:right;"> <li><div>10</div>&
-
jquery移动点击的项目到列表最顶端的方法
本文实例讲述了jquery移动点击的项目到列表最顶端的方法.分享给大家供大家参考.具体实现方法如下: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 如果点击two,则two这一行会移动到列表的最上方 $("li").click(function() { $(this).parent().prepend($(this)); }); 希望
-
jquery 实现拖动文件上传加载进度条功能
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" > <div class="progress-label">0%</div> <div class="son"></div> </div> //要拖动到的地方 <div class="main
-
jQuery实现拖动效果的实例代码
jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">
-
a.sp.net清除ListBox的列表项(删除所有项目)
如何清除ListBox的列表项(删除所有项目), 今天开发程序时,有尝试使用此功能.一开始并不是很顺利.循环所有item去做remove时,需要执行两次才可以完成清除.debug进行步进跟踪,发现在Listbox.Items.Count 每移除一个,Count随之减少,而Capacity并没有作相应变化. 在网上搜索相关资料,相当多用户有相同要求,一次移除ListBox的列表所有项.方法均是用: 复制代码 代码如下: for (int i = 0; i < Listbox1.Items.Coun
-
jQuery窗口拖动功能的实现代码
具体代码如下所示: $("#showTitle").mousedown(function (e) { vbool = true; vHeight = e.pageY; vWidth = e.pageX; cHeight = vHeight - $("#show").offset().top; cWdith = vWidth - $("#show").offset().left; //alert("divshow" + $(&q
-
jQuery图片拖动组件Dropzone用法示例
本文实例讲述了jQuery图片拖动组件Dropzone用法.分享给大家供大家参考,具体如下: dropzone 主要功能:支持拖动图片上传,提供图片预览,等功能 参考地址:http://www.dropzonejs.com 1. 安装 npm install dropzone ,会下载一个dropzone 2. dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上 3. 初始化Dropzone ,demo代码如下 <!DO
-
jQuery列表检索功能实现代码
先给大家展示下效果图: 这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的jquery实现的 具体代码如下 $(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $(".ggsm_list li span").parent().h
-
Python列表list排列组合操作示例
本文实例讲述了Python列表list排列组合操作.分享给大家供大家参考,具体如下: 排列 例如: 输入为 ['1','2','3']和3 输出为 ['111','112','113','121','122','123','131','132','133','211','212','213','221','222','223','231','232','233','311','312','313','321','322','323','331','332','333'] 实现代码: # -*-