title: JavaScript drag and drop - how to get data-id with getAttribute , when dropped an image
body: <p>I am doing to drag and drop the image in javascript.I gave some attributes in image.I am calling the attributes ("data-id") on the name.</p>
  
  <pre><code>  &lt;img class="item" id="Img1" src="http://dummyimage.com/100x100/000/fff&amp;text=Halil" draggable="true" ondragstart="drag(event)" alt="" data-id="10" /&gt;
              &lt;img class="item" id="Img2" src="http://dummyimage.com/100x100/000/fff&amp;text=Figen" draggable="true" ondragstart="drag(event)" alt="" data-id="20" /&gt;
              &lt;img class="item" id="Img3" src="http://dummyimage.com/100x100/000/fff&amp;text=Naz" draggable="true" ondragstart="drag(event)" alt="" data-id="30"/&gt;
              &lt;img class="item" id="Img4" src="http://dummyimage.com/100x100/000/fff&amp;text=Test" draggable="true" ondragstart="drag(event)" alt="" data-id="40"/&gt;
              &lt;img class="item" id="Img5" src="http://dummyimage.com/100x100/000/fff&amp;text=Huni" draggable="true" ondragstart="drag(event)" alt="" data-id="50"/&gt;
              &lt;img class="item" id="Img6" src="http://dummyimage.com/100x100/000/red&amp;text=Mavi" draggable="true" ondragstart="drag(event)" alt="" data-id="60"/&gt;
              &lt;img class="item" id="Img0" src="http://dummyimage.com/100x100/000/fff&amp;text=Can" draggable="true" ondragstart="drag(event)" alt="" data-id="90"/&gt;&lt;/label&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I drag and drop the images above , I want to catch (data-id) in the class side.Codes are true the class side but when I try to drop the image , I dont catch the (data-id) in the javascript.İf I get the data-id,I will send  to data-id  to class with ajax.</p>
  
  <pre><code>function Pack() {
      var va = { id: "pack" + packList.length, items: [], idList:[] };
      packList.push(va);
      document.getElementById("packCount").value = packList.length;
  
  }
  
  var packList = [];
  
  function allowDrop(ev) {
      ev.preventDefault();
  
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.getAttribute('data-id'));
  
  }
  
  function drop(ev) {
      ev.preventDefault();
      debugger;
      var data = ev.dataTransfer.getData("Text");
  
      var itemToMove = document.getElementById(data).getAttribute('data-id');
  
      ev.target.appendChild(itemToMove);
  
  checkAdult(itemToMove.parentNode.parentNode.id).idList.push(itemToMove);
  
  }
  
  function checkAdult(idToFind) {
      for (i = 0;packList.length;i++)
      {
          if( packList[i].id == idToFind)
          {
              return packList[i];
          }
      }
      return null;
  }
  
  function sendForm() {  
  
      debugger;
  
      $.ajax({
          type:"POST",
          url:"Packman.aspx/SendToFriend",      //"Packman.aspx/SendToFriend", // the method we are calling
          contentType: "application/json; charset=utf-8",
          data: '{ abc: ' +  JSON.stringify(packList) +'}',
          dataType: 'JSON',
          traditional:true,
          success: function (result) {
              alert('True');
          },
          error: function (result) {
              alert('False');
          }
      });
      return false;
  }
  </code></pre>
  
  <p>Now,whenever I drag and drop the pictures in the PackList just like down below,I want to push the (data-id) in idList,When I press the postback button.
  So, I can send (data-id) to the class side.
  where I am going wrong here ?</p>
  
  <p><a href="https://i.stack.imgur.com/q06gS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q06gS.jpg" alt="about project"></a></p>
  
  <p><a href="https://i.stack.imgur.com/JfLHw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JfLHw.jpg" alt="Error"></a></p>