JavaScript drag and drop - how to get data-id with getAttribute , when dropped an image

问题

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.

  <img class="item" id="Img1" src="http://dummyimage.com/100x100/000/fff&text=Halil" draggable="true" ondragstart="drag(event)" alt="" data-id="10" />
            <img class="item" id="Img2" src="http://dummyimage.com/100x100/000/fff&text=Figen" draggable="true" ondragstart="drag(event)" alt="" data-id="20" />
            <img class="item" id="Img3" src="http://dummyimage.com/100x100/000/fff&text=Naz" draggable="true" ondragstart="drag(event)" alt="" data-id="30"/>
            <img class="item" id="Img4" src="http://dummyimage.com/100x100/000/fff&text=Test" draggable="true" ondragstart="drag(event)" alt="" data-id="40"/>
            <img class="item" id="Img5" src="http://dummyimage.com/100x100/000/fff&text=Huni" draggable="true" ondragstart="drag(event)" alt="" data-id="50"/>
            <img class="item" id="Img6" src="http://dummyimage.com/100x100/000/red&text=Mavi" draggable="true" ondragstart="drag(event)" alt="" data-id="60"/>
            <img class="item" id="Img0" src="http://dummyimage.com/100x100/000/fff&text=Can" draggable="true" ondragstart="drag(event)" alt="" data-id="90"/></label></div>

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.

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;
}

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 ?

来源：https://stackoverflow.com/questions/40369941/javascript-drag-and-drop-how-to-get-data-id-with-getattribute-when-dropped-a

标签

javascript

jquery

html

ajax

drag-and-drop