1、设置自定义的数据：
//定义表格内和自定义数据中需要显示的字段
var data = {
"detail":{
"dataList": [
{
"fileldKey":"number",
"fileldNo":1,
"fileldValue":"序号",
"isCheck":true
},
{
"fileldKey":"name",
"fileldNo":2,
"fileldValue":"姓名",
"isCheck":true
},
{
fileldKey:"html",
fileldNo:4,
fileldValue:"HTML5",
isCheck:true
},
{
fileldKey:"css",
fileldNo:5,
fileldValue:"CSS3",
isCheck:true
},
{
fileldKey:"vue",
fileldNo:8,
fileldValue:"VUE.js",
isCheck:true
}
]
}
}
//定义表格内容的数据
var tbodyArr = [
{
number:"1",
name:"小鲸鱼",
sex:"女",
html:"熟练",
css:"熟练",
js:"熟练",
jq:"熟练",
vue:"熟练",
wxgzh:"熟练",
es:"熟练",
ajax:"熟练",
wx:"熟练"
},
{
number:"2",
name:"小乌龟",
sex:"女",
html:"熟练",
css:"熟练",
js:"熟练",
jq:"熟练",
vue:"熟练",
wxgzh:"熟练",
es:"熟练",
ajax:"熟练",
wx:"熟练"
},{
number:"3",
name:"毛毛",
sex:"男",
html:"熟练",
css:"熟练",
js:"熟练",
jq:"熟练",
vue:"熟练",
wxgzh:"熟练",
es:"熟练",
ajax:"熟练",
wx:"熟练"
}
];
复制代码2、使用模板引擎显示在页面上
HTML:
<div class="main-container container-fluid">
<div class="page-container">
<div class="page-content" style="margin-left:0px">
<h2 style="text-align: center;">自定义拖拽显示功能</h2>
<div class="widget">
<div class="widget-body table-scrollable mobile-width boxheight" style="min-width:250px;overflow:scroll">
<table class="table table-striped table-hover table-bordered" id="definedTable">
<thead>
<tr role="row">
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="modal-body" style="height:180px;" id="userDefinedModal">
</div>
</div>
<div style="padding-left:0px;">
<input type="checkbox" name="userCheckbox" id="userCheckbox" style="position: static;opacity: inherit;margin: -2px 0 0 63px;vertical-align: middle;">
<span>全选</span>
</div>
</div>
</div>
</div>
</div>
<script id="userDefinedGen" type="text/html">
{{if detail.dataList.length > 0}}
{{each detail.dataList as value i}}
{{if value.isCheck == false}}<!--未选中-->
<div class="col-xs-2 segmentBody" draggable="true">
<span>{{value.fileldValue}}</span>
<span class="noShow">{{value.fileldKey}}</span>
<i class="glyphicon glyphicon-remove iconD closed" name="closed"></i>
</div>
{{/if}}
{{if value.isCheck == true}}
<div class="col-xs-2 segmentBody active" draggable="true">
<span>{{value.fileldValue}}</span>
<span class="noShow">{{value.fileldKey}}</span>
<i class="glyphicon glyphicon-ok iconD yes" name="yes"></i>
</div>
{{/if}}
{{/each}}
{{/if}}
</script>
JS：
function showDefined(){
var showBody = [];
var showHead = [];
for(var i = 0;i<data.detail.dataList.length;i++){
if(data.detail.dataList[i].isCheck == 1){
showHead.push(data.detail.dataList[i].fileldValue);
showBody.push(data.detail.dataList[i].fileldKey);
}
}
if(showBody.length == data.detail.dataList.length){
$("#userCheckbox").attr("checked","true");
}
//渲染head
var headHtml = '<tr role="row">';
for(var i = 0;i<showHead.length;i++){
headHtml += '<th class="distext center">'+showHead[i]+'</th>';
}
headHtml+="</tr>";
$("#definedTable thead").html(headHtml);
//渲染body
var bodyHtml = "";
for(var i = 0;i<tbodyArr.length;i++){
var num = i+1;
bodyHtml += '<tr data_id="'+i+'">';
for(var j = 0;j<showBody.length;j++){
bodyHtml += '<td>'+tbodyArr[i][showBody[j]]+'</td>';
}
bodyHtml += '</tr>';
}
$("#definedTable tbody").html(bodyHtml);
var html = template.render('userDefinedGen', data);//渲染模板引擎
$("#userDefinedModal").html(html);//追加在页面上
//初始化拖拽的方法
divs = document.querySelectorAll('.segmentBody');
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false);
d.addEventListener('dragenter', handleDragEnter, false);
d.addEventListener('dragover', handleDragOver, false);
d.addEventListener('dragleave', handleDragLeave, false);
d.addEventListener('drop', handleDrop, false);
d.addEventListener('dragend', handleDragEnd, false);
});
}
复制代码3.拖拽功能：
拖拽功能的实现方法主要是通过拖拽事件，获取两个dom的内容进行替换，并且把样式也替换，使得看起来两个div进行的位置的变换。
//初始化拖拽的方法
divs = document.querySelectorAll('.segmentBody');
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false);
d.addEventListener('dragenter', handleDragEnter, false);
d.addEventListener('dragover', handleDragOver, false);
d.addEventListener('dragleave', handleDragLeave, false);
d.addEventListener('drop', handleDrop, false);
d.addEventListener('dragend', handleDragEnd, false);
});
//拖拽的方法：
function handleDragStart(e) {
this.style.opacity = '1';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
if($(this).hasClass('active') && $(dragSrcEl).hasClass('active')){
//$(dragSrcEl).addClass('active');
//$(this).addClass('active');
}else if(!$(this).hasClass('active') && !$(dragSrcEl).hasClass('active')){
//$(dragSrcEl).removeClass('active');
//$(this).removeClass('active');
}else if($(this).hasClass('active')){
$(dragSrcEl).addClass('active');
$(this).removeClass('active');
}else{
$(dragSrcEl).removeClass('active');
$(this).addClass('active');
}
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {
this.style.opacity = '1';
[].forEach.call(divs, function(d) {
d.classList.remove('over');
showNewHtml();//重新渲染页面的方法
});
}
复制代码4、每次拖拽完成后需要改变自定义的数据，对页面进行重新渲染：
function showNewHtml(){
var newUserDefinedList = [];
$("#userDefinedModal div").each(function(index, el) {
var obj = {
"fileldValue": $(el).find('span').eq(0).html(),
"fileldKey": $(el).find('span').eq(1).html(),
"fileldNo":index+1,
"isCheck":$(el).hasClass('active')?1:0
}
newUserDefinedList.push(obj);
});
//重新把页面上所有的已选中的div复制check=1
var fileldValueList = [];
$("#userDefinedModal .active").each(function(index, el) {
fileldValueList.push($(el).find('span').eq(0).html());
});
for(let i = 0;i < newUserDefinedList.length;i++){
for(let j = 0;j<fileldValueList.length;j++){
if(fileldValueList[j] == newUserDefinedList[i].fileldValue){
newUserDefinedList[i].isCheck = 1;
}
}
}
data.detail.dataList = newUserDefinedList;
showDefined();//重新显示页面上的dom
}
复制代码5.是否显示的点击事件：
//点击对号设置显示隐藏
$("#userDefinedModal ").on("click",'i[name="yes"]',function(){
if($(this).parent().hasClass('active')){
$(this).parent().removeClass('active');
$(this).removeClass('glyphicon-ok yes');
$(this).addClass('glyphicon-remove closed');
for(let i = 0;i<data.detail.dataList.length;i++){
if($(this).parent().find('span').eq(0).html() == data.detail.dataList[i].fileldValue){
data.detail.dataList[i].isCheck = 0;
}
}
$("#userCheckbox").removeAttr("checked");//移除复选框选中
}else{
$(this).parent().addClass('active');
$(this).removeClass('glyphicon-remove closed');
$(this).addClass('glyphicon-ok yes');
let checkList = [];
for(let i = 0;i<data.detail.dataList.length;i++){
if($(this).parent().find('span').eq(0).html() == data.detail.dataList[i].fileldValue){
data.detail.dataList[i].isCheck = 1;
}
if(data.detail.dataList[i].isCheck == 1){
checkList.push(data.detail.dataList[i]);
}
}
//判断是否全选，让全选的复选框选中
if(checkList.length == data.detail.dataList.length){
$("#userCheckbox").attr("checked","true");
}
}
showDefined();
});
//点击关闭按钮设置显示
$("#userDefinedModal ").on("click",'i[name="closed"]',function(){
if($(this).parent().hasClass('active')){
$(this).parent().removeClass('active');
$(this).removeClass('glyphicon-ok yes');
$(this).addClass('glyphicon-remove closed');
for(let i = 0;i<data.detail.dataList.length;i++){
if($(this).parent().find('span').eq(0).html() == data.detail.dataList[i].fileldValue){
data.detail.dataList[i].isCheck = 0;
}
}
$("#userCheckbox").removeAttr("checked");
}else{
$(this).parent().addClass('active');
$(this).removeClass('glyphicon-remove closed');
$(this).addClass('glyphicon-ok yes');
let checkList = [];
for(let i = 0;i<data.detail.dataList.length;i++){
if($(this).parent().find('span').eq(0).html() == data.detail.dataList[i].fileldValue){
data.detail.dataList[i].isCheck = 1;
}
if(data.detail.dataList[i].isCheck == 1){
checkList.push(data.detail.dataList[i]);
}
}
if(checkList.length == data.detail.dataList.length){
$("#userCheckbox").attr("checked","true");
}
}
showDefined();
});
//全选
$("#userCheckbox").on("click",function(){
if($(this).is(':checked') == true){
$("#userDefinedModal .segmentBody").each(function(index, el) {
$(el).addClass('active');
$(el).find("i").addClass('yes glyphicon-ok');
$(el).find("i").removeClass('closed glyphicon-remove');
});
for(let i = 0;i<data.detail.dataList.length;i++){
data.detail.dataList[i].isCheck = 1;
}
}else{
$("#userDefinedModal .segmentBody").each(function(index, el) {
$(el).removeClass('active');
$(el).find("i").removeClass('yes glyphicon-ok');
$(el).find("i").addClass('closed glyphicon-remove');
});
for(let i = 0;i<data.detail.dataList.length;i++){
data.detail.dataList[i].isCheck = 0;
}
}
showDefined();
});复制代码6、这个功能是当时比较急的一个需求，现在贴出来供大家参考，如有不详细的，可以看我的github
里面的html直接点开运行就OK咯，如果帮到你了，麻烦下点star哦，谢谢你啦
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
