当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒).
| Property | Type | Description |
|---|
target 只读 | EventTarget | 被拖动元素下方的元素 |
type 只读 | DOMString | 事件类型 |
bubbles 只读 | Boolean | 事件是否冒泡 |
cancelable 只读 | Boolean | 该事件是否可以被取消 |
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. |
<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>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<script>
var dragged;
/* 拖动目标元素时触发drag事件 */
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 ) {
// 阻止默认动作以启用drop
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);
</script>
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains.
Find out how you can help! | Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|
| Basic support | 4 | 3.5 (1.9.1) | 10 | 12 | 3.1 |
| Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
|---|
| Basic support | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 | 10 | 未实现 | 未实现 |
发布评论