---
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">&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
&lt;title&gt;Examples of using the Drag and Drop Global Event Attribute&lt;/title&gt;
&lt;meta content="width=device-width"&gt;
&lt;style&gt;
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;script&gt;
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;
}
&lt;/script&gt;
&lt;body onload="init();"&gt;
&lt;h1&gt;Examples of &lt;code&gt;ondragenter&lt;/code&gt;, &lt;code&gt;ondragleave&lt;/code&gt;, &lt;code&gt;ondragend&lt;/code&gt;, &lt;code&gt;ondragexit&lt;/code&gt;&lt;/h1&gt;
 &lt;div&gt;
   &lt;p id="source" ondragstart="dragstart_handler(event);" draggable="true"&gt;
     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

</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>