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(); });更改代码使图片拖进盒子后,还可拖出盒子
时间: 2023-08-12 19:03:23 浏览: 45
修改后的代码如下:
```javascript
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);
// 给拖拽进来的图片绑定 dragstart 事件
$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();
});
```
修改后的代码增加了一段给拖拽进来的图片绑定 `dragstart` 事件的代码,这样图片就可以从盒子中拖拽出去了。