RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations below:

Drag Operations - ÐÐ½ÑÐµÑÑÐµÐ¹ÑÑ Ð²ÐµÐ± API

Drag Operations

draggable Ð°ÑÑÐ¸Ð±ÑÑÑ

Ð£ÑÑÐ°Ð½Ð¾Ð²Ð¸ÑÑ [draggable](/ru/docs/Web/HTML/Global_attributes#draggable)="true" Ð½Ð° ÑÐ»ÐµÐ¼ÐµÐ½Ñ, ÐºÐ¾ÑÐ¾ÑÑÐ¹ Ð²Ñ ÑÐ¾ÑÐ¸ÑÐµ ÑÐ´ÐµÐ»Ð°ÑÑ Ð¿ÐµÑÐµÑÐ°ÑÐºÐ¸Ð²Ð°ÐµÐ¼ÑÐ¼.
ÐÐ¾Ð±Ð°Ð²Ð¸ÑÑ Ð¾Ð±ÑÐ°Ð±Ð¾ÑÑÐ¸Ðº ÑÐ¾Ð±ÑÑÐ¸Ñ dragstart.
Ð£ÑÑÐ°Ð½Ð¾Ð²Ð¸ÑÑ Ð´Ð°Ð½Ð½ÑÐµ Ð¿ÐµÑÐµÑÐ°ÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ Ð² Ð¾Ð±ÑÐ°Ð±Ð¾ÑÑÐ¸Ðº Ð²ÑÑÐµ.

<p
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</p>

<p
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</p>

Drag-Ð´Ð°Ð½Ð½ÑÐµ

ÐÑÐµ drag events Ð¸Ð¼ÐµÑÑ ÑÐ²Ð¾Ð¹ÑÑÐ²Ð¾, Ð½Ð°Ð·ÑÐ²Ð°ÐµÐ¼Ð¾ÐµdataTransfer, ÐºÐ¾ÑÐ¾ÑÐ¾Ðµ ÑÐ¾Ð´ÐµÑÐ¶Ð¸Ñ drag-Ð´Ð°Ð½Ð½ÑÐµ (dataTransfer ÑÑÐ¾ DataTransfer object).

event.dataTransfer.setData("text/plain", "Text to drag");

ÐÐ´ÐµÑÑ, Ð·Ð½Ð°ÑÐµÐ½Ð¸Ðµ - "Text to drag", ÑÐ¾ÑÐ¼Ð°Ñ - text/plain.

const dt = event.dataTransfer;
dt.setData("application/x.bookmark", bookmarkString);
dt.setData("text/uri-list", "https://www.mozilla.org");
dt.setData("text/plain", "https://www.mozilla.org");

event.dataTransfer.clearData("text/uri-list");

event.dataTransfer.setDragImage(image, xOffset, yOffset);

function dragWithCustomImage(event) {
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = 50;

  const ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.moveTo(0, 50);
  ctx.lineTo(50, 0);
  ctx.stroke();

  const dt = event.dataTransfer;
  dt.setData("text/plain", "Data to Drag");
  dt.setDragImage(canvas, 25, 25);
}

Drag ÑÑÑÐµÐºÑÑ

event.dataTransfer.effectAllowed = "copy";

none: Ð½Ð¸ÐºÐ°ÐºÐ°Ñ Ð¾Ð¿ÐµÑÐ°ÑÐ¸Ñ Ð½Ðµ ÑÐ°Ð·ÑÐµÑÐµÐ½Ð°
copy: ÑÐ¾Ð»ÑÐºÐ¾ copy
move: ÑÐ¾Ð»ÑÐºÐ¾ move
link: ÑÐ¾Ð»ÑÐºÐ¾ link
copyMove: ÑÐ¾Ð»ÑÐºÐ¾ copy Ð¸Ð»Ð¸ move
copyLink: ÑÐ¾Ð»ÑÐºÐ¾ copy Ð¸Ð»Ð¸ link
linkMove: ÑÐ¾Ð»ÑÐºÐ¾ link Ð¸Ð»Ð¸ move
all: ÑÐ¾Ð»ÑÐºÐ¾ copy, move, Ð¸Ð»Ð¸ link
uninitialized: ÐÐ½Ð°ÑÐµÐ½Ð¸Ðµ Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ all.

event.dataTransfer.dropEffect = "copy";

Ð£ÐºÐ°Ð·Ð°Ð½Ð¸Ðµ drop-ÑÐµÐ»ÐµÐ¹

<div ondragover="return false">
  <div ondragover="event.preventDefault()"></div>
</div>

function doDragOver(event) {
  const isLink = event.dataTransfer.types.includes("text/uri-list");
  if (isLink) {
    event.preventDefault();
  }
}

Drop Feedback

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the dropEffect property.

Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the :-moz-drag-over CSS pseudoclass on a drop target.

.droparea:-moz-drag-over {
  outline: 1px solid black;
}

In this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the preventDefault() method was called during the dragenter event.

ÐÑÐ¸Ð¼ÐµÑÐ°Ð½Ð¸Ðµ: You must cancel the dragenter event for this pseudoclass to apply, as this state is not checked for the dragover event.

For more complex visual effects, you can also perform other operations during the dragenter event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an image or separator element and simply insert it into the document during the dragenter event.

The dragover event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a dragover event as well. You can use the event's clientX and clientY properties as with other mouse events to determine the location of the mouse pointer.

Finally, the dragleave event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically. The dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

Performing a Drop

When the user releases the mouse, the drag and drop operation ends.

If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled, and no drop event is fired.

During the drop event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the dropEffect property to determine which drag operation was desired.

As with all drag-related events, the event's dataTransfer property will hold the data that is being dragged. The getData() method may be used to retrieve the data again.

function onDrop(event) {
  const data = event.dataTransfer.getData("text/plain");
  event.target.textContent = data;
  event.preventDefault();
}

The getData() method takes one argument, the type of data to retrieve. It will return the string value that was set when setData() was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. (Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a dragover event.)

In the example here, once the data has been retrieved, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

In a web page, you should call the preventDefault() method of the event if you have accepted the drop, so that the browser's default handling is not triggered by the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

function doDrop(event) {
  const lines = event.dataTransfer.getData("text/uri-list").split("\n");
  lines
    .filter((line) => !line.startsWith("#"))
    .forEach((line) => {
      const link = document.createElement("a");
      link.href = line;
      link.textContent = line;
      event.target.appendChild(link);
    });
  event.preventDefault();
}

This example inserts a link from the dragged data. As the name implies, the text/uri-list type actually may contain a list of URLs, each on a separate line. The above code uses split to break the string into lines, then iterates over the list of lines, and inserts each as a link into the document. (Note also that links starting with a number sign (#) are skipped, as these are comments.)

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

const link = event.dataTransfer.getData("URL");

This eliminates the need to check for comments or iterate through lines yourself. However, it is limited to only the first URL in the list.

The URL type is a special type. It is used only as a shorthand, and it does not appear within the list of types specified in the types property.

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In the following example, three formats are supported by a drop target.

The following example returns the data associated with the best-supported format:

function doDrop(event) {
  const supportedTypes = [
    "application/x-moz-file",
    "text/uri-list",
    "text/plain",
  ];
  const types = event.dataTransfer.types.filter((type) =>
    supportedTypes.includes(type),
  );
  if (types.length) {
    const data = event.dataTransfer.getData(types[0]);
  }
  event.preventDefault();
}

ÐÐºÐ¾Ð½ÑÐ°Ð½Ð¸Ðµ Ð¿ÐµÑÐµÑÐ°ÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ

Ð¡Ð¼Ð¾ÑÑÐ¸ÑÐµ ÑÐ°ÐºÐ¶Ðµ

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations below:

Drag Operations - ÐÐ½ÑÐµÑÑÐµÐ¹ÑÑ Ð²ÐµÐ± API

Drag Operations - ÐÐ½ÑÐµÑÑÐµÐ¹ÑÑ Ð²ÐµÐ± API