js 实现在指定类名dom下,可拖拽排序,不是指定类名下的dom不可以拖拽排序
时间: 2024-02-27 20:51:19 浏览: 25
可以使用原生的 JavaScript 或者 jQuery 实现指定类名下的可拖拽排序功能。以下是一个使用原生 JavaScript 的示例代码:
HTML 代码:
```html
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
```
JavaScript 代码:
```javascript
var dragSrcEl = null;
function handleDragStart(e) {
this.style.opacity = '0.4'; // 设置拖拽时的透明度
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) {
this.style.opacity = '1'; // 恢复原始的透明度
}
var cols = document.querySelectorAll('.sortable li');
[].forEach.call(cols, function(col) {
col.setAttribute('draggable', 'true');
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
```
在上面的示例代码中,我们首先获取了类名为 `sortable` 的 `ul` 元素下的所有 `li` 元素,并为每个 `li` 元素添加了拖拽事件的监听器。然后,在拖拽开始时,我们设置了拖拽元素的透明度,以及保存了拖拽元素的引用。在拖拽过程中,我们阻止了默认的放置行为,并设置了允许放置的效果。在放置时,我们首先判断拖拽元素和目标元素是否相同,如果不同,则交换它们的内容。最后,在拖拽结束时,我们恢复了元素的透明度。