无法在HTML5 Drag&drop，请不要jquery

Not able to appendChild in HTML5 Drag & drop,No jquery please

本文关键字：drop jquery amp HTML5 Drag      更新时间：2023-09-26

我有两列&我想拖动&在这些列之间放置div。我使用以下使这个拖动功能工作

var _dragStart =function(event){
        console.log("Method Executing:dragDrop.dragStart")
        var x=event.dataTransfer.setData('draggable',event.target);
    }

这里event.target是一个有子元素的htmldiv元素。关于投放

var _dropOver = function(event){
        console.log("Method Executing:dragDrop.dropOver");
        event.preventDefault();
        var getTask = event.dataTransfer.getData('draggable');
        event.target.appendChild(getTask);
        }

但它抛出了一个错误作为

    Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

您收到此错误是因为getTask是String，而不是Node。您可以看到event.dataTransfer.getData在此处返回一个String：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#getData.28.29

appendChild采用Node，而不是String。这就是为什么你不能让它发挥作用。

相关文章：