diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/globaleventhandlers/ondragstart | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/api/globaleventhandlers/ondragstart')
-rw-r--r-- | files/ru/web/api/globaleventhandlers/ondragstart/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/ru/web/api/globaleventhandlers/ondragstart/index.html b/files/ru/web/api/globaleventhandlers/ondragstart/index.html new file mode 100644 index 0000000000..3ead749a9b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/ondragstart/index.html @@ -0,0 +1,111 @@ +--- +title: GlobalEventHandlers.ondragstart +slug: Web/API/GlobalEventHandlers/ondragstart +translation_of: Web/API/GlobalEventHandlers/ondragstart +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers","global event handler")}} для события {{event("dragstart")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>dragstartHandler</var> = <var>targetElement</var>.ondragstart; +</pre> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<dl> + <dt><code>dragstartHandler</code></dt> + <dd>Обработчик событий <em>dragstart</em> для элемента <code>targetElement</code>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Этот пример демонстрирует использование {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} атрибута обработчика для установки обработчика событий элемента {{event("dragstart")}}.</p> + +<pre class="brush: js"><!DOCTYPE html> +<html lang=en> +<title>Examples of using the ondrag Global Event Attribute</title> +<meta content="width=device-width"> +<style> + div { + margin: 0em; + padding: 2em; + } + #source { + color: blue; + border: 1px solid black; + } + #target { + border: 1px solid black; + } +</style> +</head> +<script> +function drag_handler(ev) { + console.log("Drag"); +} + +function dragstart_handler(ev) { + console.log("dragStart"); + ev.dataTransfer.setData("text", ev.target.id); +} + +function drop_handler(ev) { + console.log("Drop"); + ev.currentTarget.style.background = "lightyellow"; + + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} + +function dragover_handler(ev) { + console.log("dragOver"); + ev.preventDefault(); +} +</script> +<body> +<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> + <div> + <p id="source" ondrag="drag_handler(event);" 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> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ondragstart")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{event("dragstart")}}</li> +</ul> |