jQuery 拖放返回 "Object has no method ' 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 的传递没有问题。我刚刚在控制台中收到 Uncaught TypeError: Object [object Object] has no method 'appendChild' 消息。想法？

需要更多信息吗？谢谢!

Answer 1

这段代码有几个问题。

jQuery 对象上的 appendChild 方法

self.appendChild($(elemId)); 中的

self 是一个 jQuery 对象，但是 appendChild( )是DOM元素的一个方法，这就是发生错误的原因。

ID选择器

您还根据您的 ID 创建了不正确的选择器。 ID 选择器应以 # 开头。

更正的代码

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

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

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