var dragImg = document.getElementById('dragImg'); var box = document.getElementById('box'); dragImg.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text', e.target.id); }); box.addEventListener('dragover', function(e) { e.preventDefault(); }); box.addEventListener('drop', function(e) { e.preventDefault(); var data = e.dataTransfer.getData('text'); var draggedImg = document.getElementById(data); box.appendChild(draggedImg); });更改为jQuery
时间: 2024-02-19 10:03:26 浏览: 18
下面是将上述代码改写为 jQuery 的方式:
```
var $dragImg = $('#dragImg');
var $box = $('#box');
$dragImg.on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData('text', e.target.id);
});
$box.on('dragover', function(e) {
e.preventDefault();
});
$box.on('drop', function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData('text');
var $draggedImg = $('#' + data);
$box.append($draggedImg);
});
```
首先,我们使用 `$()` 函数来获取元素的引用,`#` 符号代表 id 选择器,`.on()` 方法用来添加事件监听器。
在 `dragstart` 事件中,我们访问 `e.originalEvent.dataTransfer` 对象来设置拖放数据。在 `drop` 事件中,我们访问 `e.originalEvent.dataTransfer` 对象来获取拖放数据。这是因为 jQuery 事件对象中的 dataTransfer 对象被封装在 `originalEvent` 属性中。
此外,我们使用 `$()` 函数来获取被拖拽的元素和目标元素的引用,并使用 `$box.append($draggedImg)` 方法将被拖拽的元素添加到目标元素中。