Question

似乎Safari没有很好地处理拖放。在下面的代码段中，绿色div在拖动时不会跟随鼠标指针，而是沿着向右和向下的方向跟随。

编辑：当嵌入此处时，拖动时无处可见绿色div。这个小提琴更好https://jsfiddle.net/8vckLerm/1/

我找不到任何使其表现正常的技巧。有没有人有任何建议？

由于

＆＃13;

function ods(ev) {
  console.log('START');
}

function od(ev) {
  ev.preventDefault();
  console.log('DROP');
}

function odo(ev) {
  ev.preventDefault();
  console.log('OVER');
}

＆＃13;

div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
  background: white;
}

div[draggable] {
  background: #cfc;
  position: relative;
}

＆＃13;

<div ondragstart="ods(event)" draggable="true">
  Drag Me
</div>
<div ondrop="od(event)" ondragover="odo(event)">
  Hello
</div>

＆＃13;

Answer 1

将此行添加到ods功能。

ev.dataTransfer.setData("text", ev.target.id);

更新了fiddle

function ods(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log('START');
}

function od(ev) {
  ev.preventDefault();
  console.log('DROP');
}

function odo(ev) {
  ev.preventDefault();
  console.log('OVER');
}

div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
  background: white;
}

div[draggable] {
  background: #cfc;
  position: relative;
}

<div ondragstart="ods(event)" draggable="true">
  Drag Me
</div>
<div ondrop="od(event)" ondragover="odo(event)">
  Hello
</div>

在Safari OSX中拖放

1 个答案: