0
function drag_drop(event) {
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
    var elem_id = event.dataTransfer.getData("text");
    event.target.appendChild( document.getElementById(elem_id) );
    $('#app_status').innerHTML = "Dropped "+elem_id+" into the "+event.target.getAttribute('id');
    document.getElementById(elem_id).removeAttribute("draggable");
    document.getElementById(elem_id).style.cursor = "default";
    droppedIn = true;
}

This function is working fine but when I update it with jQuery's $() method instead of document.getElementById it gives a error :

index.js:22 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drag_drop (index.js:22)
    at HTMLDivElement.ondrop (index.html?_ijt=ifai0ih42qnjkillablo2ulcln:15)

The updated function looks like this:

function drag_drop(event) {
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
    var elem_id = event.dataTransfer.getData("text");
    event.target.appendChild( $('#' + elem_id) );
    $('#app_status').innerHTML = "Dropped "+elem_id+" into the "+event.target.getAttribute('id');
    $('#' + elem_id).removeAttribute("draggable");
    $('#' + elem_id).style.cursor = "default";
    droppedIn = true;
}
Joe
  • 15,205
  • 8
  • 49
  • 56
Ahtisham Shahid
  • 55
  • 2
  • 7
  • 6
    `$("#app_status").html("Dropped " ... )` — you should find a basic jQuery book or tutorial. – Pointy Aug 23 '17 at 14:13
  • 1
    seems you are mixing `jquery` and `vanilla js` – kukkuz Aug 23 '17 at 14:14
  • app_status is id of element where as elem_id is variable which contain id – Ahtisham Shahid Aug 23 '17 at 14:15
  • 2
    The only jQuery reference you will ever need ---> http://api.jquery.com – Rory McCrossan Aug 23 '17 at 14:15
  • `$()` returns a jQuery object, not an element. You can [get to the element(s)](https://api.jquery.com/get/) from the object, but personally I doubt if you should. Why replace a perfectly working piece of plain JavaScript with a piece of code that is just as long and complex, but in addition requires a thick library? – GolezTrol Aug 23 '17 at 14:15
  • To much `jQuery` on `JavaScript` objects .. – Red Aug 23 '17 at 14:16
  • I'm wondering why you are "updating" (subjective) perfectly fine js to jQuery... – Stuart Aug 23 '17 at 14:22

1 Answers1

1

Few changes in your code, as per jQuery

function drag_drop(event) {
   event.preventDefault(); /* Prevent undesirable default behavior while dropping */
   var elem_id = event.dataTransfer.getData("text");
   event.target.appendChild( $('#' + elem_id) );

   // ---- **Updated Code**
   $('#app_status').html("Dropped "+elem_id+" into the "+event.target.getAttribute('id'));
   $('#' + elem_id).removeAttr("draggable");
   $('#' + elem_id).css({cursor: "default"});


   droppedIn = true;
}
Shiladitya
  • 12,003
  • 15
  • 25
  • 38