DataTransfer: метод setDragImage()

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

При перетаскивании генерируется полупрозрачное изображение из целевого элемента перетаскивания (элемента, на котором происходит событие dragstart), которое следует за указателем мыши во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако, если требуется пользовательское изображение, можно использовать метод DataTransfer.setDragImage(), чтобы установить пользовательское изображение. Обычно изображение представляет собой элемент <img>, но также может быть элементом <canvas> или любым другим видимым элементом.

Координаты x и y метода определяют, как должно отображаться изображение относительно указателя мыши. Эти координаты задают смещение в изображении, где должен быть курсор мыши. Например, чтобы изображение отображалось так, чтобы указатель был в центре, используйте значения, равные половине ширины и высоты изображения.

Этот метод должен быть вызван в обработчике события dragstart.

Синтаксис

setDragImage(imgElement, xOffset, yOffset)

Параметры

imgElement

Элемент изображения Element для использования в качестве изображения обратной связи при перетаскивании.

Если Element — элемент img, то устанавливает битовое отображение данных перетаскивания на изображение элемента (в его внутреннем размере); в противном случае устанавливает битовое отображение данных перетаскивания на изображение, сгенерированное из данного элемента (точный механизм пока не определён).

Примечание: Если Element — существующий элемент HTMLElement, он должен быть видимым в области просмотра, чтобы отображаться как изображение обратной связи при перетаскивании. В качестве альтернативы вы можете создать новый элемент DOM, который может быть вне экрана специально для этой цели.

xOffset

Значение, определяющее горизонтальное смещение в изображении.

yOffset

Значение, определяющее вертикальное смещение в изображении.

Возвращаемое значение

None (undefined).

Примеры

В этом примере показано, как использовать метод setDragImage(). Пример ссылается на файл изображения, названный example.gif. Если этот файл существует, он будет использован в качестве изображения перетаскивания, в противном случае браузер использует стандартное изображение перетаскивания.

демо

<!doctype html>
<html lang="en">
  <head>
    <title>Example of DataTransfer.setDragImage()</title>
    <meta name="viewport" content="width=device-width" />
    <style>
      div {
        margin: 0em;
        padding: 2em;
      }
      #source {
        color: blue;
        border: 1px solid black;
      }
      #target {
        border: 1px solid black;
      }
    </style>
    <script>
      function dragStartHandler(ev) {
        console.log("dragStart");
        // Set the drag's format and data. Use the event target's id for the data
        ev.dataTransfer.setData("text/plain", ev.target.id);
        // Create an image and use it for the drag image
        // NOTE: change "example.gif" to an existing image or the image will not
        // be created and the default drag image will be used.
        const img = new Image();
        img.src = "example.gif";
        ev.dataTransfer.setDragImage(img, 10, 10);
      }

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

      function dropHandler(ev) {
        console.log("Drop");
        ev.preventDefault();
        // Get the data, which is the id of the drop target
        const data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <h1>Example of <code>DataTransfer.setDragImage()</code></h1>
    <div>
      <p id="source" ondragstart="dragStartHandler(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="dropHandler(event);"
      ondragover="dragOverHandler(event);">
      Drop Zone
    </div>
  </body>
</html>

Спецификации

Спецификация
HTML # dom-datatransfer-setdragimage-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`setDragImage`	3	18	3.5	≤12.1	4	18	4	≤12.1	3.2	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage