这篇翻译不完整。请帮忙从英语翻译这篇文章。
The dragleave
event is fired when a dragged element or text selection leaves a valid drop target.
基本信息
Bubbles | Yes |
Cancelable | No |
Target objects | Document , Element |
Interface | DragEvent |
Default Action | None. |
属性
Property | Type | Description |
---|---|---|
target 只读 |
EventTarget |
The element that was underneath the element being dragged. |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not? |
view 只读 |
WindowProxy |
document.defaultView (window of the document) |
detail 只读 |
long (float ) |
0. |
dataTransfer |
DataTransfer | The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode. |
currentTarget 只读 |
EventTarget | The node that had the event listener attached. |
relatedTarget 只读 |
EventTarget | For mouseover , mouseout , mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. |
screenX 只读 |
long | The X coordinate of the mouse pointer in global (screen) coordinates. |
screenY 只读 |
long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
clientX 只读 |
long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
clientY 只读 |
long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
button 只读 |
unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. |
buttons 只读 |
unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info. |
mozPressure 只读 |
float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
ctrlKey 只读 |
boolean | true if the control key was down when the event was fired. false otherwise. |
shiftKey 只读 |
boolean | true if the shift key was down when the event was fired. false otherwise. |
altKey 只读 |
boolean | true if the alt key was down when the event was fired. false otherwise. |
metaKey 只读 |
boolean | true if the meta key was down when the event was fired. false otherwise. |
示例:dropzone
HTML 内容
<div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div>
CSS 内容
#draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; }
JavaScript 内容
var dragged; /* 可拖动的目标元素会触发事件 */ document.addEventListener("drag", function( event ) { }, false); document.addEventListener("dragstart", function( event ) { // 保存拖动元素的引用(ref.) dragged = event.target; // 使其半透明 event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { // 重置透明度 event.target.style.opacity = ""; }, false); /* 放下目标节点时触发事件 */ document.addEventListener("dragover", function( event ) { // 阻止默认动作 event.preventDefault(); }, false); document.addEventListener("dragenter", function( event ) { // 当可拖动的元素进入可放置的目标高亮目标节点 if ( event.target.className == "dropzone" ) { event.target.style.background = "purple"; } }, false); document.addEventListener("dragleave", function( event ) { // 当拖动元素离开可放置目标节点,重置其背景 if ( event.target.className == "dropzone" ) { event.target.style.background = ""; } }, false); document.addEventListener("drop", function( event ) { // 阻止默认动作(如打开一些元素的链接) event.preventDefault(); // 移动拖动的元素到所选择的放置目标节点 if ( event.target.className == "dropzone" ) { event.target.style.background = ""; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); } }, false);