jquery.dad.js實現拖放排序

DAD 是一款基於 jQuery 的拖拽/拖放插件，它支持常見的水平拖放、垂直拖放、多行拖放、指定拖放區域、回調函數、容許/禁止拖放等等，同時你也能夠稍加改造，作成相似垃圾簍、購物車等效果。

使用方法

一、引入文件

<link rel="stylesheet" href="css/jquery.dad.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dad.min.js"></script>

二、HTML

<div class="dowebok">
    <div class="item item1"><span>1</span></div>
    <div class="item item2"><span>2</span></div>
    <div class="item item3"><span>3</span></div>
    <div class="item item4"><span>4</span></div>
    <div class="item item5"><span>5</span></div>
</div>

三、JavaScript

$(function(){ 
    $('.dowebok').dad();
});

配置

屬性/方法	類型	默認值	說明
target	字符串	>div	要拖放的對象
draggable	布爾值	false	綁定拖動對象
placeholder	字符串	drop here	放入區域的文本佔位符
callback	布爾值	false	拖放後的回調函數
containerClass	字符串	dad-container	爲綁定對象增長的 class
childrenClass	字符串	dads-children	爲綁定對象的子對象增長的 class
cloneClass	字符串	dads-children-clone	爲被克隆對象增長的 class
active	布爾值	true	默認是否可拖放

 

var test=$('.drag-tbody').dad({
target:"tr", //定義要拖拽的DOM對象
})  

 

*****這裏的代碼有兩點須要注意：

 

（1）$對象：是須要拖拽的對象父容器，我這裏須要tbody下的每一行都能拖拽，因此$對象是tbody的class

 

（2）target參數：應該插件默認爲div,若是不設置爲‘tr’,tbody下的tr就沒有拖拽效果  ps:也可根據項目需求自定義

 

(3) 如今，tbody下的每一行均可以垂直拖拽了，那還要打印拖動的第幾行，往下看：

 

 

*****注意項：

 

（1）callback()是拖拽成功的回調函數

 

（2）e 是當前拖拽的對象，用find()找到當前拖拽行的第一列（序號）

 

 

 

 --------------------------------------

 

DAD 官方主頁：http://www.konsolestudio.com/dad/

GitHub 地址：https://github.com/williammustaffa/jquery.dad.js