html5拖放drop - TypeError:Node.appendChild的参数1不是对象

时间:2016-04-15 17:48:35

标签: javascript html5

我有这个简单的拖放脚本。它基本上允许我将项目从窗格拖到另一个窗格。

当我完成删除时出现错误

TypeError: Argument 1 of Node.appendChild is not an object.

这很奇怪,因为我很确定我的论点是一个对象。那么我没有到达那里?

以下是脚本的外观



<!DOCTYPE html>
<html>

<head>

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    ul,
    ol {
      display: block;
      width: 200px;
      height: 300px;
      float: left;
      margin: 20px;
    }
    ul {
      background: #927aff;
    }
    ol {
      background: #dda3f2;
    }
    li {
      list-style-type: none;
      padding: 6px 10px;
      color: #fff;
      display: block;
      border-bottom: 1px solid #fff;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <ul id="music">
    <li draggable="true">pop</li>
    <li draggable="true">hiphop</li>
    <li draggable="true">jazz</li>
    <li draggable="true">country</li>
  </ul>

  <ol id="math">
    <li draggable="true">number</li>
    <li draggable="true">integeter</li>
    <li draggable="true">floating point</li>
  </ol>

  <script>
    var li = document.querySelectorAll('ul li');

    Array.prototype.forEach.call(li, function(item) {
      item.ondragstart = function(e) {
        e.dataTransfer.setData("secret", this);
      }
    });
    document.getElementById('math').ondrop = function(e) {
      e.preventDefault();
      console.log('this', this);
      var dom = e.dataTransfer.getData("secret");
      console.log(dom);
      this.appendChild(dom);
    };
    document.getElementById('math').ondragover = function(e) {
      e.preventDefault();
    }
  </script>
</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

好像作为dataTransfer一部分的数据被设置为字符串。

因此,您拥有的dom变量是一个字符串,因此它不是可以作为子项附加的HTML节点

(如果在例外情况下添加断点,则可以看到这一点)

以下是一个可以作为踩点的工作示例(不使用dataTransfer):https://jsfiddle.net/maniator/aopmgvso/

var li = document.querySelectorAll('li');
var currentDragging;
Array.prototype.forEach.call(li, function(item) {
  item.ondragstart = function(e) {
    currentDragging = this;
  }
});
document.getElementById('math').ondrop = function(e) {
  e.preventDefault();
  this.appendChild(currentDragging);
};
document.getElementById('music').ondrop = function(e) {
  e.preventDefault();
  e.currentTarget.appendChild(currentDragging);
};
document.getElementById('math').ondragover = function(e) {
  e.preventDefault();
}
document.getElementById('music').ondragover = function(e) {
  e.preventDefault();
}

答案 1 :(得分:1)

dataTransfer真正意味着字符串。你可以做的是设置一个全局数组,并通过dataTransfer将索引传递给你的DOM引用。

像这样:

var ref = [];
Array.prototype.forEach.call(li, function(item) {
  item.ondragstart = function(e) {
    var index = ref.push(this) - 1; //as push() returns length, not index, remove 1.
    e.dataTransfer.setData("secret", index);
  }
});
document.getElementById('math').ondrop = function(e) {
  e.preventDefault()
  console.log('this', this);
  var index = e.dataTransfer.getData("secret");
  dom = ref[index];
  ref = ref.splice(index, 1); //remove element at that index
  console.log(dom.innerHTML);
  this.appendChild(dom);
};

或者使用您的代码查看示例小提琴:

https://jsfiddle.net/ujv1uaLb/1/