Установка формы перетаскивания: дублирование и пустые поля. ⇐ Html

[Anonymous]

Я работаю над настройщиком формы перетаскивания, где пользователи могут добавлять, переупорядочить и удалять поля с использованием alpine.js и ortable.js. Тем не менее, я сталкиваюсь с двумя проблемами, которые я не могу исправить: < /p>

[*] Дублирующиеся поля:
Когда пользователь переорчает поля, дубликаты Поля создаются в списке. Например, если я переупорядочен уже существующее поле (например, «Имя»), оно снова добавлено в список. < /P>
< /li>
Пустые поля :
При повторном порядок поле (например, перемещение «мобильного» в новую позицию) в списке появляется пустое поле. < /p>
< /li>
< /ol>






.sortable-chosen { background: #f0f0f0; }
.sortable-ghost { opacity: 0.5; }







Header

• Company Logo
• 
  Company Name
• 
  Address
• 
  Mobile No.
• 
  Email
• 
  GST Number

Available Fields











Customize














Edit
✔


Single
Double
Delete




section.layout === 'double' ? 'grid grid-cols-2 gap-2' : 'grid grid-cols-1 gap-2',
section.isDraggingOver ? 'bg-green-100 border-2 border-green-500 border-dotted p-4' : 'border bg-gray-50'
]"
class="mt-2 p-2 min-h-[50px]"
@dragover.prevent="setDraggingOver(index, true)"
@dragenter.prevent="setDraggingOver(index, true)"
@dragleave="setDraggingOver(index, false)"
@drop="dropField($event, index)"
x-ref="sortableSection"
x-init="Sortable.create($refs.sortableSection, {
animation: 150,
onEnd: (evt) => {
if (evt.oldIndex !== evt.newIndex) {
let movedField = sections[index].fields.splice(evt.oldIndex, 1)[0];
sections[index].fields.splice(evt.newIndex, 0, movedField);
}
}
})">



✖









Add Section





document.addEventListener("alpine:init", () => {
Alpine.data("customizer", () => ({
availableFields: [
"Employee ID", "First Name", "Last Name", "Email", "Mobile", "Date of Birth", "Gender", "Address",
"City", "State", "Postal Code", "Country", "Department", "Designation", "Joining Date", "Salary",
"Employment Type", "Work Shift", "Reporting Manager", "Status"
],
originalOrder: [
"Employee ID", "First Name", "Last Name", "Email", "Mobile", "Date of Birth", "Gender", "Address",
"City", "State", "Postal Code", "Country", "Department", "Designation", "Joining Date", "Salary",
"Employment Type", "Work Shift", "Reporting Manager", "Status"
],
sections: [],
isPreview: false,
togglePreview() {
this.isPreview = !this.isPreview;
},
toggleEdit(index) {
this.sections[index].isEditing = !this.sections[index].isEditing;
},
addSection() {
this.sections.push({
name: `Section ${this.sections.length + 1}`,
isEditing: false,
layout: "single",
fields: [],
isDraggingOver: false
});
},
removeSection(index) {
this.sections[index].fields.forEach(field => this.restoreFieldOrder(field));
this.sections.splice(index, 1);
},
removeField(sectionIndex, field) {
this.restoreFieldOrder(field);
this.sections[sectionIndex].fields = this.sections[sectionIndex].fields.filter(f => f !== field);
},
toggleLayout(index, double = false) {
this.sections[index].layout = double ? "double" : "single";
},
dragField(event, field) {
event.dataTransfer.setData("text/plain", field);
},
dropField(event, target) {
if (this.isPreview) return;
const field = event.dataTransfer.getData("text/plain");
if (target === "available") {
if (!this.availableFields.includes(field)) {
this.restoreFieldOrder(field);
}
} else {
const section = this.sections[target];
if (!section.fields.includes(field)) {
section.fields.push(field);
}
this.availableFields = this.availableFields.filter(f => f !== field);
}
this.setDraggingOver(target, false);
},
setDraggingOver(index, status) {
this.sections[index].isDraggingOver = status;
},
restoreFieldOrder(field) {
this.availableFields = [...new Set([...this.originalOrder.filter(f => !this.availableFields.includes(f)), ...this.availableFields])];
}
}));
});








Подробнее здесь: https://stackoverflow.com/questions/794 ... reordering