fix: 修复字段拖拽排序功能
Coze-Commit-Type: user Coze-User-ID: 3722323274763196 Coze-Conversation-ID: 9894087
This commit is contained in:
BIN
assets/image_20260710155447661.png
Normal file
BIN
assets/image_20260710155447661.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -1199,14 +1199,27 @@
|
|||||||
// 初始化拖拽排序
|
// 初始化拖拽排序
|
||||||
function initDragAndDrop() {
|
function initDragAndDrop() {
|
||||||
const orderList = document.getElementById('selected-fields-order');
|
const orderList = document.getElementById('selected-fields-order');
|
||||||
|
if (!orderList) return;
|
||||||
|
|
||||||
const items = orderList.querySelectorAll('.selected-field-item');
|
const items = orderList.querySelectorAll('.selected-field-item');
|
||||||
let draggedItem = null;
|
let draggedItem = null;
|
||||||
|
|
||||||
|
// 为容器添加 dragover 和 drop 事件
|
||||||
|
orderList.addEventListener('dragover', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.dataTransfer.dropEffect = 'move';
|
||||||
|
});
|
||||||
|
|
||||||
|
orderList.addEventListener('drop', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
item.addEventListener('dragstart', function(e) {
|
item.addEventListener('dragstart', function(e) {
|
||||||
draggedItem = this;
|
draggedItem = this;
|
||||||
setTimeout(() => this.classList.add('dragging'), 0);
|
setTimeout(() => this.classList.add('dragging'), 0);
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
e.dataTransfer.setData('text/plain', this.dataset.field);
|
||||||
});
|
});
|
||||||
|
|
||||||
item.addEventListener('dragend', function() {
|
item.addEventListener('dragend', function() {
|
||||||
@@ -1218,9 +1231,10 @@
|
|||||||
|
|
||||||
item.addEventListener('dragover', function(e) {
|
item.addEventListener('dragover', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
e.dataTransfer.dropEffect = 'move';
|
e.dataTransfer.dropEffect = 'move';
|
||||||
|
|
||||||
if (this !== draggedItem) {
|
if (this !== draggedItem && draggedItem) {
|
||||||
const rect = this.getBoundingClientRect();
|
const rect = this.getBoundingClientRect();
|
||||||
const midY = rect.top + rect.height / 2;
|
const midY = rect.top + rect.height / 2;
|
||||||
|
|
||||||
@@ -1231,6 +1245,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
item.addEventListener('drop', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user