HTML ondragleave 事件
当可拖动元素或文本离开有效的放置目标时，ondragleave 事件触发。
实例
<!DOCTYPE HTML><html><head><style>.droptarget {float: left;width: 100px;height: 35px;margin: 15px;padding: 10px;border: 1px solid #aaaaaa;}</style></head><body><p>在两个矩形之间来回拖动p元素：</p><div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)"><p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p></div><div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div><p style="clear:both;" id="demo"></p><script>function dragStart(event) {event.dataTransfer.setData("Text", event.target.id);}function dragEnter(event) {if ( event.target.className == "droptarget" ) {event.target.style.border = "3px dotted red";document.getElementById("demo").innerHTML = "Entered the dropzone";}}function dragLeave(event) {if ( event.target.className == "droptarget" ) {event.target.style.border = "";document.getElementById("demo").innerHTML = "Left the dropzone";}}function allowDrop(event) {event.preventDefault();}function drop(event) {event.preventDefault();var data = event.dataTransfer.getData("Text");event.target.appendChild(document.getElementById(data));}</script></body></html>
浏览器支持
| 事件 | |||||
|---|---|---|---|---|---|
| ondragleave | 4 | 9 | 3.5 | 6 | 12 |
所有主流浏览器都支持 ondragleave 事件。
定义和用法
当可拖动元素或文本离开有效的放置目标时，ondragleave 事件触发。
ondragenter 和 ondragleave 事件可以用户在拖动元素将要进入或离开放置目标时处理事件。
注意：要使元素可拖动，请使用全局HTML5 draggable 属性。
提示：默认情况下链接和图像是可拖动的，不需要额外设置 draggable 属性。
下面是一些在拖放操作的不同阶段可能发生的事件：
在可拖动目标（源元素）上触发的事件：
ondragstart-当用户开始拖动元素时触发
ondrag-在拖动元素时触发
ondragend-当用户完成拖动元素时触发
对投放目标触发的事件：
ondragenter-当被拖动的元素进入放置目标时触发
ondragover-当拖动的元素位于放置目标上时触发
ondragleave-当拖动的元素离开放置目标时触发
ondrop-当拖动的元素放置在放置目标上时触发
HTML 4.01 与 HTML5 之间的差异
无。
语法
<element ondragleave="script">
属性值
| 值 | 描述 |
|---|---|
| script | ondragleave 发生时运行的脚本。 |