dataTransfer.setData

dataTransfer.setData方法在JavaScript中用于设置拖放操作中传递的数据。它接受两个参数，第一个参数是数据的格式（通常是MIME类型），第二个参数是要传递的数据。

例如，如果要将文本数据传递给拖放操作的目标元素，可以使用以下代码：

event.dataTransfer.setData('text/plain', 'Hello, world!');

这将设置拖放操作的数据类型为纯文本，并将数据设置为"Hello, world!"。在拖放操作的目标元素上，可以使用dataTransfer对象的getData方法来获取传递的数据。

请注意，这个方法只能在拖放事件（如dragstart）的事件处理程序中使用。

相关问题

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); }); $draggedImg.on('dragstart', function(e) { e.originalEvent.dataTransfer.setData('text', e.target.id); }); }); $box.on('dragstart', 'img', function(e) { e.originalEvent.dataTransfer.setData('text', e.target.id); }); $box.on('dragend', 'img', function(e) { var data = e.originalEvent.dataTransfer.getData('text'); var $draggedImg = $('#' + data); $draggedImg.remove(); });上述代码有什么问题

上述代码存在语法问题和逻辑问题。

1. 语法问题：

- 第2行代码中，变量名应该使用驼峰式命名法，即应该写成 $dragImg。
- 第3行代码中，变量名应该使用驼峰式命名法，即应该写成 $box。
- 第10行代码中，多了一个多余的右括号。

2. 逻辑问题：

- 第7行代码中，应该调用 drop 事件中的 preventDefault() 方法，以防止浏览器默认打开图片。
- 第14行代码中，$draggedImg 变量未定义，应该在 drop 事件中定义。
- 第18行代码中，多了一个多余的右括号。
- 第20行代码中，应该使用 on() 方法绑定 dragstart 事件，而不是直接调用 dragstart() 方法。
- 第24行代码中，应该使用 on() 方法绑定 dragend 事件，而不是直接调用 dragend() 方法。

下面是修改后的代码：

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);
});

$box.on('dragstart', 'img', function(e) {
    e.originalEvent.dataTransfer.setData('text', e.target.id);
});

$box.on('dragend', 'img', function(e) {
    var data = e.originalEvent.dataTransfer.getData('text');
    var $draggedImg = $('#' + data);
    $draggedImg.remove();
});

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

下面是将上述代码改写为 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)` 方法将被拖拽的元素添加到目标元素中。