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(); });上述代码有什么问题
时间: 2023-12-19 19:06:16 浏览: 142
jquery拖拉布局.zip
上述代码存在语法问题和逻辑问题。
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();
});
```
阅读全文