jQuery列表拖动排列具体实现_Javascript教程-查字典教程网
jQuery列表拖动排列具体实现
jQuery列表拖动排列具体实现
发布时间:2017-01-14 来源:查字典编辑
摘要:实现这个很简单第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1....

实现这个很简单

第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js。

第二,代码

复制代码 代码如下:

<h2>两组列表拖放:</h2>

<ul id="list2">

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

三,样式

复制代码 代码如下:

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

四,解释

dragSelector

CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。

dragSelectorExclude

CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。

dragEnd

拖动结束后将被调用的回调函数.

dragBetween

设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。

placeHolderTemplate

拖动列表的HTML部分。默认值是"<li></li>".

scrollContainer

CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.

scrollSpeed

一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类