jQuery拖放返回"对象没有方法'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

这段代码有几个问题.

appendChildjQuery对象的方法

selfin self.appendChild($(elemId));是一个jQuery对象,但是appendChild()是DOM元素的一种方法,这就是错误发生的原因.

ID选择器

您也可以从ID 创建错误的选择器.ID选择器应该从#.

更正了代码

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

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

它有用吗？这可能不是此代码的唯一问题.