Question

我正在开发一个React应用程序，似乎遇到了IE和Edge中的一个问题，因此下面的代码行似乎抛出了错误：

错误（1）

消息： Element not found.

代码：

onDragStart={event => { 
    event.dataTransfer.setData('storm-diagram-node', JSON.stringify(this.props.model));
}}

错误（2）

消息： JSON.parse Error: Unexpected input at position:0

代码：

onDrop={event => {
    var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
}}

现在这个应用程序在Chrome中完美运行，但由于某种原因不是IE或Edge。这些似乎都是同一个问题，也就是为什么他们在同一个问题上。

Answer 1

setData和getData不适用于自定义MIME类型。

请参阅https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8007622/。

Answer 2

仅在我的工具箱中找到了一小段代码。在EDGE中签入。

<!DOCTYPE HTML >
<html>
<head>
<title>12 hour Time and Date stamp</title>
<meta name="" content="">
<style>
    .thing {
  width: 100px;
  height: 2em;
  padding: 0.5em;
  margin: 0.5em;
  background: rgba(0,0,0,0.8);
  color: white;
  font-family: sans-serif;
 }
.col {
  width: 130px;
  height: 450px;
  padding: 1em;
  border: 1px solid;
  border-radius: 5px;
  position: relative;
  float: left;
  }
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
  var origThing = document.getElementById(data);
  var newThing = origThing.cloneNode(true);
    ev.target.appendChild(newThing);
}
</script>
</head>
<body>
<div class="col" id="col1">
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing1">THING 1</div>
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing2">THING 2</div>  
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing3">THING 3</div>  
  <div class="thing" draggable="true" ondragstart="drag(event)" id="thing4">THING 4</div>
</div>
<div class="col" id="col2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>

希望它会有所帮助：）

dataTransfer IE / Edge中的getData和setData

2 个答案: