实现托找和删除的列表效果
列表是我们在日常生活中经常使用的一种数据结构，它可以方便地组织和管理我们的数据。而在前端开发中，实现一个可拖拽和删除的列表效果也是非常常见的需求。
实现这个功能的核心技术就是使用HTML5的拖拽事件和JavaScript的DOM操作。当我们拖拽一个列表项时，我们需要监听拖拽事件，并且在拖拽过程中动态改变这个列表项的位置。当我们松开鼠标时，我们需要将这个列表项插入到新的位置，并且更新列表的数据。而当我们想要删除一个列表项时，我们只需要监听删除按钮的点击事件，并且从列表中移除这个元素即可。
下面是一个简单的示例代码：
HTML部分：
```html
- 列表项1
- 列表项2
- 列表项3
```
JavaScript部分：
```javascript
var list = document.querySelector('#list');
list.addEventListener('dragstart', function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
this.classList.add('dragging');
});
list.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragging-over');
});
list.addEventListener('dragleave', function(e) {
this.classList.remove('dragging-over');
});
list.addEventListener('drop', function(e) {
e.preventDefault();
var dragging = document.querySelector('.dragging');
var target = e.target.closest('li');
this.insertBefore(dragging, target);
this.classList.remove('dragging-over');
});
list.addEventListener('dragend', function(e) {
var dragging = document.querySelector('.dragging');
dragging.classList.remove('dragging');
});
list.addEventListener('click', function(e) {
if (e.target.classList.contains('delete')) {
e.target.closest('li').remove();
}
});
```
在这个示例中，我们首先给每个列表项设置了draggable属性，表示它们是可以拖拽的。然后我们监听了列表的dragstart、dragover、dragleave、drop和dragend等事件，并且在这些事件中实现了拖拽和删除的逻辑。
总结来说，实现一个可拖拽和删除的列表效果并不难，只需要掌握好HTML5的拖拽事件和JavaScript的DOM操作即可。同时，我们也可以根据自己的需求对代码进行扩展和优化，让列表更加实用和易用。
