jQuery Drag & 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()
    }
  });
})

Итак - идентификатор элемента передается без проблем. Я просто получаю Uncaught TypeError: Object [object Object] не имеет сообщения метода 'appendChild' в консоли. мысли?

Нужна дополнительная информация? Спасибо!

Answer 1

Есть несколько проблем с этим кодом.

appendChild метод на jQuery объекте

self в self.appendChild($(elemId)); - это объект jQuery, но appendChild() - это метод элемента DOM , поэтому возникает ошибка.

Селектор идентификатора

Также вы создаете неверный селектор из своего идентификатора. Селектор идентификатора должен начинаться с #.

Исправленный код

После этих исправлений ваш код должен выглядеть следующим образом:

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

Это сработало? Возможно, это не единственная проблема с этим кодом.

Answer 2

jQuery не имеет .appendChild(), о котором я знаю.Вы, вероятно, ищете .append ()

Answer 3

Используйте append() вместо appendChild().