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); });补全代码使图片可拖拽可脱出

下面是完整的代码，实现了图片可拖拽、可脱出的功能：

HTML 代码：

<div id="box"></div>
<img id="dragImg" src="image.jpg" alt="image">

CSS 代码：

#box {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  margin: 20px;
  padding: 20px;
}

#dragImg {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: move;
}

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

$dragImg.on('dragend', function(e) {
  var $draggedImg = $(this);
  var $parent = $draggedImg.parent();
  if ($parent.attr('id') === 'box') {
    $draggedImg.remove();
  }
});

在上述代码中，我们添加了一个 `dragend` 事件监听器，当拖拽操作结束时，`dragend` 事件会被触发。在事件处理函数中，我们首先使用 `$()` 函数获取被拖拽元素的引用，然后使用 `$().parent()` 方法获取到被拖拽元素的父级元素。如果父级元素是目标元素 `$box`，则使用 `$().remove()` 方法将被拖拽元素从 DOM 树中删除。

这样，我们就实现了图片可拖拽、可脱出的功能。