Question

我正在创建一个包含多个图表的页面，并希望能够拖放plotly.js容器。成功拖放后，绘图模式栏和单击+拖动选择不再有效。如何“重置”或重新关注图形模式栏和clickdrag选择？这是一个带有问题的codepen（从模板栏或图表右侧拖动容器）：https://codepen.io/bmarker/pen/rLorBm

HTML：

<body>
  <div class="wrapper" id="wrapper1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  </div>
  <div class="wrapper wrapper2" id="dropcanvas" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <div id="myDiv2" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  </div>
  <script>
   function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);
  console.log("from drag",ev.currentTarget.id)
}

function drop(ev) {

    ev.preventDefault();
    var data = ev.dataTransfer.getData('text/html');
   //console.log("data from drop",data);
  console.log("ev", ev);
  ev.currentTarget.innerHTML=data;
}
  </script>
</body>

JS：

var trace1 = {
  x: [1, 2, 3, 4], 
  y: [10, 15, 13, 17], 
  type: 'scatter'
};
var trace2 = {
  x: [1, 2, 3, 4], 
  y: [16, 5, 11, 9], 
  type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);

的CSS：

.wrapper{
  border:1px solid red;
  width:600px;
  display:inline-block;
}
.wrapper2{
  background-color:grey;
}

当拖放到另一个div

0 个答案: