input file选了多个图片后 返回了filelist 我要调换图片的位置 如何修改呢
时间: 2024-02-13 12:03:02 浏览: 23
如果你想调换所选图片的位置,可以使用 JavaScript 中的数组方法来实现。以下是一个简单的示例代码,可以通过拖动和释放来重新排列文件列表中的图片位置:
HTML 代码:
```html
<div id="file-list">
<div class="file-item" draggable="true">图片1</div>
<div class="file-item" draggable="true">图片2</div>
<div class="file-item" draggable="true">图片3</div>
<div class="file-item" draggable="true">图片4</div>
</div>
```
JavaScript 代码:
```javascript
var fileList = document.getElementById('file-list');
var files = fileList.children;
var dragSrcEl = null;
function handleDragStart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function handleDragEnd(e) {
for (var i = 0; i < files.length; i++) {
files[i].classList.remove('over');
}
}
for (var i = 0; i < files.length; i++) {
files[i].addEventListener('dragstart', handleDragStart, false);
files[i].addEventListener('dragover', handleDragOver, false);
files[i].addEventListener('drop', handleDrop, false);
files[i].addEventListener('dragend', handleDragEnd, false);
}
```
在这个示例中,我们为每个文件列表项添加了 `draggable` 属性,并且为每个文件列表项添加了拖动和释放事件的监听器。拖动事件在开始时将 `dragSrcEl` 设置为当前拖动的元素,释放事件在结束时将元素交换位置。最后,我们将所需的文件列表项的顺序保存在数组中,以便在提交表单时上传这些文件。