Question

i have what i thought would be a simple drag and drop I can’t seem to get to work. I simply want to move a dragged image into its target:

$('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()
    }
  });
})

So – the element ID is being passed without issue. I’m just getting a Uncaught TypeError: Object [object Object] has no method ‘appendChild’ message in the console. thoughts?

Need more info?? Thanks!

Answer 1

There are several problems with this code.

appendChild method on jQuery object

self in self.appendChild($(elemId)); is a jQuery object, but appendChild() is a method of DOM element, this is why the error occurs.

ID selector

Also you create incorrect selector from your ID. ID selector should start with #.

Corrected code

After these fixes your code should look like this:

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

Did it work? This may not be the only issue with this code.