拖拽排序插件dragsort.js
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>拖动排序</title>
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://www.jq22.com/demo/dragsort202302192234/dragsort.js"></script>
</head>
<body>
<table border= "1" style="border-spacing: 0;border-collapse: collapse;height:800px;table-layout: fixed;">
<tr style="height:30px;">
<td>
<button>获取所有</button>
<button>添加</button>
<button>获取</button>
<button>删除</button>
</td>
<td>
<button>获取所有</button>
<button>添加</button>
<button>获取</button>
<button>删除</button>
</td>
</tr>
<tr>
<td style="width:50%;padding:20px;">
<div id="dragBox" idField="id"iconField="icon" textField="name"itemHeight="130"showClose="false" allowDrag="false"></div>
</td>
<td style="width:50%;padding:20px;">
<div id="dragBox1"></div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
let data=[],opts1={
itemWidth: 150,
itemHeight:130,
times:1200,
showClose:true,
allowDrag:true,
idField:"Id",
textField: "Text",
iconField:"Icon",
onitemclick:"itemclick",
onitemremove:"removeItem",
data:[]
}
for(i=0;i<8;i++){
let id=getGuid();
data.push({id:id,name:`${i+1} _ ${id}`,icon:"fa fa-globe"})
opts1.data.push({Id:id,Text:`item${i+1} _ ${id}`,Icon:"fa fa-drupal"})
}
//原生js用法
let sender=new DragSort("#dragBox",{data:data});
console.log(sender)
//引入jquery后可如下
let sender1=$("#dragBox1").dragSort(opts1)
function tileLoaded(e){
}
function itemclick(a,b,c,d){
alert("opts-"+b.options.data.length+":elData-"+b.drag._elData.list.length)
console.log(a)
console.log(JSON.stringify(a))
}
function removeItem(a,b,c,d){
alert(JSON.stringify(a))
}
function getAllData(n){
let result=n==0?sender.getData():sender1.getData();
alert(`(${result.length})`+JSON.stringify(result))
}
function getData(n){
let result=n==0?sender.getData():sender1.getData(),
index=Math.floor(Math.random()*result.length),
item=result;
alert(JSON.stringify(item))
}
function addData(n){
let id=getGuid(),len,item,arr;
if(n==0){
arr=sender.getData().map(m=>m.name.substring(0,m.name.indexOf("_")).trim());
len=Math.max(...arr)+1;
item={id:id,name:`${len} _ ${id}`,icon:"fa fa-globe"};
sender.addItem(item)
}else{
arr=sender1.getData().map(m=>m.Text.substring(0,m.Text.indexOf("_")).trim().substring(4))
len=Math.max(...arr)+1;
item={Id:id,Text:`item${len} _ ${id}`,Icon:"fa fa-drupal"}
sender1.addItem(item)
}
}
function removeData(n){
let result=n==0?sender.getData():sender1.getData(),
index=Math.floor(Math.random()*result.length),
item=result;
n==0?sender.removeItem(item.id):sender1.removeItem(item.Id)
}
function getGuid() {
let guid = ""
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid.toUpperCase();
}
/*
* 事件：
* onitemclick
* onitemdragend
* onitemdragover
* onitemdragstart
* onitemremove
* */
/*
* 方法：
* addItem(obj, index='')
* getData()
* getItem(id)
* init(options)
* removeItem(id)
* */
</script>
</html>
页:
[1]