利用js,点击提交按钮在数组中设置好的不同位置依次添加可拖拽物体,并且遍历添加好的可拖拽物体,当它的位置改变了就保持原位置,如果有没改变的就继续在这个后面排列添加可拖拽物体,如果他们的位置全部改变了就要在数组里面的初始位置重新开始排列
时间: 2024-10-27 16:06:52 浏览: 18
在JavaScript中实现这个功能,通常会结合HTML5的拖放API(Drag and Drop API)和一些库如`Sortable.js`或者自定义的事件处理器。首先,你需要创建可拖动元素(比如div),然后绑定`ondragstart`、`ondrop`和`ondragover`事件。当你点击提交按钮时,可以在数组中的指定位置插入新的元素,并利用排序算法(例如`unshift()`、`splice()`等)调整它们的位置。
下面是一个简单的步骤概述:
1. 创建可拖动元素,每个元素包含一个数据属性存储其原始位置。
2. 初始化一个数组来保存所有元素及其位置信息。
3. 点击提交按钮时,获取新元素并计算应在数组中的目标位置。
4. 使用`Array.prototype.splice()`方法在适当位置插入新元素。
5. 对于已经存在的元素,检查它们是否移动了,如果没有,则保留它们在数组中的索引;如有变化,更新位置信息。
6. 如果所有元素位置都发生了变化,将它们清空并将新元素放置在初始位置。
```javascript
// 示例代码
let draggableElements = [];
let initialPositions = [];
function addDraggableElement(position) {
let element = document.createElement('div');
element.addEventListener('dragstart', dragStart);
// 添加其他拖拽相关事件...
// 存储元素位置
initialPositions.push({element, position});
draggableElements.splice(position, 0, element);
}
function dragEnd(event) {
let element = event.target;
let currentIndex = draggableElements.indexOf(element);
if (currentIndex !== initialPositions[currentIndex].position) {
// 更新元素位置信息
initialPositions.forEach((item, index) => {
if (item.element === element) {
item.position = currentIndex;
}
});
} else {
// 没有位置改变,直接保留在当前索引
}
// 其他逻辑,比如检测所有位置是否变化,如果变化则重置等
}
// 点击提交按钮时调用 addDraggableElement() 函数
```
阅读全文