HTML+CSS+jQuery实现：图片可拖进/拖出盒子

HTML代码：

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

CSS代码：

#box {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

#dragImg {
  width: 100px;
  height: 100px;
}

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

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

以上代码实现了图片可拖进/拖出盒子的功能。图片拖进盒子后会被添加到盒子中，图片从盒子中拖出后会被删除。