js 左侧多个拖拽内容,拖拽其中一个dom到右侧,右侧dom判断拖拽到dom内并进行排序
时间: 2024-02-21 18:00:44 浏览: 34
实现这个功能,可以采用HTML5中的拖放API。
首先,需要给左侧的拖拽内容设置`draggable`属性为`true`,并添加`dragstart`事件,将被拖拽的元素的信息存储到`DataTransfer`对象中,如下所示:
```html
<div class="drag-item" draggable="true" ondragstart="drag(event)">拖拽内容1</div>
<div class="drag-item" draggable="true" ondragstart="drag(event)">拖拽内容2</div>
<div class="drag-item" draggable="true" ondragstart="drag(event)">拖拽内容3</div>
<script>
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
</script>
```
然后,在右侧的目标元素上添加`dragover`和`drop`事件。在`dragover`事件中,阻止默认行为并设置`dropEffect`为`move`,表示允许拖放操作。在`drop`事件中,获取被拖拽的元素的信息,并将其插入到目标元素的后面,实现排序。
```html
<div class="drop-target" ondragover="allowDrop(event)" ondrop="drop(event)">目标元素</div>
<script>
function allowDrop(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
var targetElement = event.target;
targetElement.parentNode.insertBefore(draggedElement, targetElement.nextSibling);
}
</script>
```
这样,当拖拽左侧的元素到右侧的目标元素内时,就可以实现排序效果了。