优化拖拽选择复选框功能

移除drag和drop依赖
pull/446/head
Karson 2023-06-27 11:47:45 +08:00
parent 4eaae6ac4e
commit 9d9c8dcf52
5 changed files with 232 additions and 134 deletions

View File

@ -6,14 +6,12 @@ require.config({
main: 'moment' main: 'moment'
}], }],
//在打包压缩时将会把include中的模块合并到主文件中 //在打包压缩时将会把include中的模块合并到主文件中
include: ['css', 'layer', 'toastr', 'fast', 'backend', 'backend-init', 'table', 'form', 'dragsort', 'drag', 'drop', 'addtabs', 'selectpage'], include: ['css', 'layer', 'toastr', 'fast', 'backend', 'backend-init', 'table', 'form', 'dragsort', 'addtabs', 'selectpage'],
paths: { paths: {
'lang': "empty:", 'lang': "empty:",
'form': 'require-form', 'form': 'require-form',
'table': 'require-table', 'table': 'require-table',
'upload': 'require-upload', 'upload': 'require-upload',
'drag': 'jquery.drag.min',
'drop': 'jquery.drop.min',
'dropzone': 'dropzone.min', 'dropzone': 'dropzone.min',
'echarts': 'echarts.min', 'echarts': 'echarts.min',
'echarts-theme': 'echarts-theme', 'echarts-theme': 'echarts-theme',

File diff suppressed because one or more lines are too long

View File

@ -6,14 +6,12 @@ require.config({
main: 'moment' main: 'moment'
}], }],
//在打包压缩时将会把include中的模块合并到主文件中 //在打包压缩时将会把include中的模块合并到主文件中
include: ['css', 'layer', 'toastr', 'fast', 'frontend', 'frontend-init', 'table', 'form', 'dragsort', 'drag', 'drop', 'selectpage'], include: ['css', 'layer', 'toastr', 'fast', 'frontend', 'frontend-init', 'table', 'form', 'dragsort', 'selectpage'],
paths: { paths: {
'lang': "empty:", 'lang': "empty:",
'form': 'require-form', 'form': 'require-form',
'table': 'require-table', 'table': 'require-table',
'upload': 'require-upload', 'upload': 'require-upload',
'drag': 'jquery.drag.min',
'drop': 'jquery.drop.min',
'dropzone': 'dropzone.min', 'dropzone': 'dropzone.min',
'echarts': 'echarts.min', 'echarts': 'echarts.min',
'echarts-theme': 'echarts-theme', 'echarts-theme': 'echarts-theme',

File diff suppressed because one or more lines are too long

View File

@ -49,6 +49,7 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
checkOnInit: true, //是否在初始化时判断 checkOnInit: true, //是否在初始化时判断
escape: true, //是否对内容进行转义 escape: true, //是否对内容进行转义
fixDropdownPosition: true, //是否修复下拉的定位 fixDropdownPosition: true, //是否修复下拉的定位
dragCheckboxMultiselect: true, //拖拽时复选框是否多选模式
selectedIds: [], selectedIds: [],
selectedData: [], selectedData: [],
extend: { extend: {
@ -218,37 +219,82 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
table.on('post-body.bs.table', function (e, data) { table.on('post-body.bs.table', function (e, data) {
$(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin"); $(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin");
if ($(Table.config.checkboxtd + ":first", table).find("input[type='checkbox'][data-index]").length > 0) { if ($(Table.config.checkboxtd + ":first", table).find("input[type='checkbox'][data-index]").length > 0) {
// 拖拽选择,需要重新绑定事件 //拖拽选择复选框
require(['drag', 'drop'], function () { var posx, posy, dragdiv, drag = false, prepare = false;
var checkboxtd = $(Table.config.checkboxtd, table); var mousemove = function (e) {
checkboxtd.drag("start", function (ev, dd) { if (drag) {
return $('<div class="selection" />').css('opacity', .65).appendTo(document.body); var left = Math.min(e.pageX, posx);
}).drag(function (ev, dd) { var top = Math.min(e.pageY, posy);
$(dd.proxy).css({ var width = Math.abs(posx - e.pageX);
top: Math.min(ev.pageY, dd.startY), var height = Math.abs(posy - e.pageY);
left: Math.min(ev.pageX, dd.startX), dragdiv.css({left: left + "px", top: top + "px", width: width + "px", height: height + "px"});
height: Math.abs(ev.pageY - dd.startY), var dragrect = {x: left, y: top, width: width, height: height};
width: Math.abs(ev.pageX - dd.startX) $(Table.config.checkboxtd, table).each(function () {
}); var checkbox = $("input:checkbox", this);
}).drag("end", function (ev, dd) { var tdrect = this.getBoundingClientRect();
$(dd.proxy).remove(); tdrect.x += document.documentElement.scrollLeft;
}); tdrect.y += document.documentElement.scrollTop;
checkboxtd.drop("start", function () {
Table.api.toggleattr(this); var td_min_x = tdrect.x;
}).drop(function () { var td_min_y = tdrect.y;
// Table.api.toggleattr(this); var td_max_x = tdrect.x + tdrect.width;
}).drop("end", function (e) { var td_max_y = tdrect.y + tdrect.height;
var that = this;
setTimeout(function () { var drag_min_x = dragrect.x;
if (e.type === 'mousemove') { var drag_min_y = dragrect.y;
Table.api.toggleattr(that); var drag_max_x = dragrect.x + dragrect.width;
var drag_max_y = dragrect.y + dragrect.height;
var overlapped = td_min_x <= drag_max_x && td_max_x >= drag_min_x && td_min_y <= drag_max_y && td_max_y >= drag_min_y;
if (overlapped) {
if (!$(this).hasClass("overlaped")) {
$(this).addClass("overlaped");
checkbox.prop("checked", !checkbox.prop("checked"));
}
} else {
if ($(this).hasClass("overlaped")) {
$(this).removeClass("overlaped");
checkbox.prop("checked", !checkbox.prop("checked"));
}
} }
}, 0); });
}); }
$.drop({ };
multi: true var selectstart = function () {
}); return false;
};
var mouseup = function () {
if (drag) {
$(document).off("mousemove", mousemove);
$(document).off("selectstart", selectstart);
dragdiv.remove();
}
drag = false;
prepare = false;
$(document.body).css({'MozUserSelect': '', 'webkitUserSelect': ''}).attr('unselectable', 'off');
};
$(Table.config.checkboxtd, table).on("mousedown", function (e) {
//禁止鼠标右键事件
if (e.button === 2) {
return false;
}
posx = e.pageX;
posy = e.pageY;
prepare = true;
}).on("mousemove", function (e) {
if (prepare && !drag) {
drag = true;
dragdiv = $("<div />");
dragdiv.css({position: 'absolute', width: 0, height: 0, border: "1px dashed blue", background: "#0029ff", left: e.pageX + "px", top: e.pageY + "px", opacity: .1});
dragdiv.appendTo(document.body);
$(document.body).css({'MozUserSelect': 'none', 'webkitUserSelect': 'none'}).attr('unselectable', 'on');
$(document).on("mousemove", mousemove).on("mouseup", mouseup).on("selectstart", selectstart);
if (options.dragCheckboxMultiselect) {
$(Table.config.checkboxtd, table).removeClass("overlaped");
}
}
}); });
} }
}); });
var exportDataType = options.exportDataType; var exportDataType = options.exportDataType;
@ -914,7 +960,7 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
row.ids = ids ? ids : (typeof row.ids !== 'undefined' ? row.ids : 0); row.ids = ids ? ids : (typeof row.ids !== 'undefined' ? row.ids : 0);
url = url == null || url.length === 0 ? '' : url.toString(); url = url == null || url.length === 0 ? '' : url.toString();
//自动添加ids参数 //自动添加ids参数
url = !url.match(/(?=([?&]ids=)|(\/ids\/)|(\{ids}))/i) ? url = !url.match(/(?=([?&]ids=)|(\/ids\/)|(\{ids}))/i) ?
url + (url.match(/(\?|&)+/) ? "&ids=" : "/ids/") + '{ids}' : url; url + (url.match(/(\?|&)+/) ? "&ids=" : "/ids/") + '{ids}' : url;
url = url.replace(/\{(.*?)\}/gi, function (matched) { url = url.replace(/\{(.*?)\}/gi, function (matched) {
matched = matched.substring(1, matched.length - 1); matched = matched.substring(1, matched.length - 1);