dragenter
当拖动的元素或被选择的文本进入有效的放置目标时,
dragenter
事件被触发。基本信息
是否冒泡 | 是 |
是否可取消 | 是 |
目标对象 | 用户指定的元素或者 body 元素 |
接口 | DragEvent |
默认动作 | 取消拖动 |
属性
属性 | 类型 | 描述 |
---|---|---|
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 | 触发事件的元素 |
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 | 全局(屏幕)坐标中鼠标指针的 X 坐标。 |
screenY 只读 |
long | 全局(屏幕)坐标中鼠标指针的 Y 坐标。 |
clientX 只读 |
long | 本地(DOM 内容)坐标中鼠标指针的 X 坐标。 |
clientY 只读 |
long | 本地(DOM 内容)坐标中鼠标指针的 Y 坐标。 |
button 只读 |
unsigned short | 鼠标事件触发时按下的按钮号:左键= 0,中键= 1(如果存在),右键= 2。 对于配置为左手使用的鼠标,其中按钮操作反转,则值从右向左读取。 |
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 | 触发事件时屏幕的压力值,介于 0.0 到 1.0 之间 |
ctrlKey 只读 |
boolean | 事件触发时 ctrl 键是否被按下 |
shiftKey 只读 |
boolean | 事件触发时 shift 键是否被按下 |
altKey 只读 |
boolean | 事件触发时 alt 键是否被按下 |
metaKey 只读 |
boolean | 事件触发时 meta 键是否被按下 |
示例: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);
规范
Specification |
---|
HTML Standard # event-dnd-dragenter |
浏览器支持
BCD tables only load in the browser