diff options
Diffstat (limited to 'files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html')
| -rw-r--r-- | files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html b/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html new file mode 100644 index 0000000000..bce1cf2d8d --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html @@ -0,0 +1,196 @@ +--- +title: GlobalEventHandlers.ondragleave +slug: Web/API/GlobalEventHandlers/ondragleave +translation_of: Web/API/GlobalEventHandlers/ondragleave +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("dragleave")}} event.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>dragleaveHandler</var> = <var>targetElement</var>.ondragleave; +</pre> + +<h3 id="Return_value">Return value</h3> + +<dl> + <dt><code>dragleaveHandler</code></dt> + <dd>The <em>dragleave</em> event handler for element <code>targetElement</code>.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>This example demonstrates using the {{domxref("GlobalEventHandlers.ondragleave","ondragleave")}} attribute handler to set an element's {{event("dragleave")}} event handler.</p> + +<pre class="brush: js"><!DOCTYPE html> +<html lang=en> +<title>Examples of using the Drag and Drop 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 dragstart_handler(ev) { + console.log("dragStart"); + // Change the source element's border to signify drag has started + ev.currentTarget.style.border = "dashed"; + ev.dataTransfer.setData("text", ev.target.id); +} + +function dragover_handler(ev) { + console.log("dragOver"); + // Change the target element's background color to signify a drag over event + // has occurred + ev.currentTarget.style.background = "lightblue"; + ev.preventDefault(); +} + +function drop_handler(ev) { + console.log("Drop"); + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} + +function dragenter_handler(ev) { + console.log("dragEnter"); + // Change the source element's background color for enter events + ev.currentTarget.style.background = "yellow"; +} + +function dragleave_handler(ev) { + console.log("dragLeave"); + // Change the source element's background color back to white + ev.currentTarget.style.background = "white"; +} + +function dragend_handler(ev) { + console.log("dragEnd"); + // Change the target element's background color to visually indicate + // the drag ended. + var el=document.getElementById("target"); + el.style.background = "pink"; +} + +function dragexit_handler(ev) { + console.log("dragExit"); + // Change the source element's background color back to green to signify a dragexit event + ev.currentTarget.style.background = "green"; +} + +function init() { + // Set handlers for the source's enter/leave/end/exit events + var el=document.getElementById("source"); + el.ondragenter = dragenter_handler; + el.ondragleave = dragleave_handler; + el.ondragend = dragend_handler; + el.ondragexit = dragexit_handler; +} +</script> +<body onload="init();"> +<h1>Examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</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> +</body> +</html> + +</pre> + +<h2 id="Specifications">Specifications</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-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("dragleave")}}</li> +</ul> |