jQuery Drag＆amp; Drop返回“对象没有方法'appendChild'”错误

Question

我有我认为简单的拖放我似乎无法开始工作。我只想将拖动的图像移动到目标中：

$('img').each(function(){
  var self = $(this);
  self.attr('draggable', 'true');
  self.bind('dragstart', function (e) {
    e.originalEvent.dataTransfer.setData('text', self.attr('id'));
  })
})
$('.drop-target').each(function(){
  var self = $(this);
  self.bind('dragover', function (e) {
    e.preventDefault();
  })
  self.bind('dragenter', function (e) {
    e.preventDefault();
  })
  self.bind('drop', function (e) {
    var elemId = e.originalEvent.dataTransfer.getData("text");
    console.log("elem id: "+elemId)
    self.appendChild($(elemId));
    if(e.preventDefault){
      e.preventDefault()
    }
  });
})

所以 - 传递元素ID没有问题。我只是得到一个未捕获的TypeError：对象[object Object]在控制台中没有方法'appendChild'消息。想法？

需要更多信息？谢谢！

Answer 1

此代码存在一些问题。

appendChild对象上的

jQuery方法 self中的{p> self.appendChild($(elemId));是jQuery个对象，但 appendChild()是DOM元素的方法，这就是错误发生的原因。

ID选择器

您还可以从ID中创建错误的选择器。 ID选择器应以#开头。

更正代码

完成这些修复后，您的代码应如下所示：

self.append($('#' + elemId));

有效吗？这可能不是此代码的唯一问题。

Answer 2

使用append()代替appendChild()。

Answer 3

jQuery没有我所知道的.appendChild()。您可能正在寻找.append()