图像中的JavaScript getAttribute（）方法

Question

我正在将图像拖放到javascript中。我在图像中给出了一些属性。我在名称上调用属性("data-id")。

<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"/>

现在，当我拖放上面的图像时，我想要在类侧捕获（data-id）。类是真正的类侧但当ı尝试丢弃图像时，我没有抓住（数据 - id）在javascript中。

function allowDrop(ev) {

     ev.preventDefault();

}


function drag(ev) {

    ev.dataTransfer.setData("text", ev.target.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);

当我回发图像时，我希望看到背后的代码。 Return İdList

它说“找不到”

这个代码在课堂上是正确的。

我在这里称呼Public Property idlist() As List(Of String) Get Return _idlist End Get Set(ByVal value As List(Of String)) _idlist = value End Set End Property

并将其归还，不存在问题。

Answer 1

如果我理解你的意思，你想获得data-id属性并将其放在某个地方。你试图删除一个文本。 appendChild(x)方法要求x为childNode。因此，您应该将文本转换为childNode。 你可以这样做。

        var itemToMove = document.getElementById(data).getAttribute("data-id");
       //convert itemToMove into a TextNode.
      itemToMove = document.createTextNode(itemToMove);
      //append it into the target
     ev.target.appendChild(itemToMove)

但是，您应该注意到数据传输类型中写有text和Text。它们应该是一样的。 希望它有所帮助

Answer 2

试试这个。我和我一起工作。