可拖拽的元素是动态变换的,设计一段程序实现动态绑定dragstart事件,而且不能重复绑定事件,如果可以最好是将事件绑定到这些元素的容器上
时间: 2024-03-16 16:43:14 浏览: 9
可以使用事件委托的方式将dragstart事件绑定到元素的容器上,然后通过判断事件的target来确定当前被拖拽的元素。具体实现可以参考以下代码示例:
```javascript
// 获取元素容器
const container = document.getElementById('container');
// 绑定dragstart事件
container.addEventListener('dragstart', function (event) {
// 判断是否为可拖拽元素
if (event.target.classList.contains('draggable')) {
// 设置被拖拽元素的数据
event.dataTransfer.setData('text/plain', event.target.id);
}
});
// 绑定drop事件
container.addEventListener('drop', function (event) {
event.preventDefault();
// 获取被拖拽元素的数据
const data = event.dataTransfer.getData('text/plain');
// 将元素移动到新位置
event.target.appendChild(document.getElementById(data));
});
// 防止默认行为
container.addEventListener('dragover', function (event) {
event.preventDefault();
});
```
在上面的代码中,我们将dragstart事件绑定到元素容器上,通过判断事件的target来判断当前被拖拽的元素,然后设置被拖拽元素的数据。同时,我们还绑定了drop事件,通过获取被拖拽元素的数据,将元素移动到新的位置。最后,我们还通过防止默认行为,避免了浏览器默认的拖放行为。