Призрачное изображение, установленное API setDragImage, значительно меньше в firefox, чем другие браузеры - PullRequest
Новая
       4

Призрачное изображение, установленное API setDragImage, значительно меньше в firefox, чем другие браузеры

0 голосов
/ 12 апреля 2020

Я устанавливаю элемент canvas в качестве изображения-призрака, используя API setDragImage .

Issue : изображение-призрак, генерируемое браузером Firefox, является намного меньше, чем в Chrome или Safari.

Я использую Firefox (74.0.1), Chrome (80.0.3987.163) с macOS (10.14.5)

Фрагмент кода : 

function dragstart_handler(ev) {
  //console.log("dragStart");
  ev.dataTransfer.setData("text/plain", ev.target.id);
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = 500;

  const ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.font = "14px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "#000000";
  var rectHeight = 100;
  var rectWidth = 200;
  var rectX = 10;
  var rectY = 10;

  ctx.fillText("Attack!", rectX + rectWidth / 2, rectY + rectHeight / 2);
  ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);

  document.body.append(canvas);
  ev.dataTransfer.setDragImage(canvas, 10, 10);
}

function dragover_handler(ev) {
  //console.log("dragOver");
  ev.preventDefault();
}

function drop_handler(ev) {
  //console.log("Drop");
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
canvas {
  position: absolute;
  left: -100%;
}
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>

Ссылка: Codepen

...