触发 ondrag
属性事件当拖动元素或文本选择时。
要使元素可拖动,请标记该元素与全局HTML5 draggable
属性。
默认情况下,链接和图像是可拖动的。
在draggable源元素上触发的事件:
投放目标上触发的事件:
ondrag
属性是HTML5中的新特性。
<element ondrag="script">
所有HTML元素
ondrag |
Yes | 9.0 | Yes | Yes | Yes |
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)"
ondrag="dragging(event)"
draggable="true"
id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
console.log("being dragged");
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
console.log("dropped");
}
</script>
</body>
</html>
Click to view the demo
HTML事件属性onfocus当元素获取焦点时,会触发 onfocus 属性事件。HTML5中的新功能没有。句法element onfocus="script or Javasc...
HTML onkeypress 事件属性 HTML 事件属性实例当按下按键时运行脚本:input type="text" onkeypress="displayResult()"浏览器支持...
HTML canvas miterLimit 属性 HTML canvas 参考手册实例以最大斜接长度 5 绘制线条:YourbrowserdoesnotsupporttheHTML5canvasta...
HTML 音频/视频 DOM buffered 属性HTML 音频/视频 DOM 参考手册实例获得视频的第一段缓冲范围(部分),以秒计:myVid=document....
HTML 音频/视频 DOM muted 属性 HTML 音频/视频 DOM 参考手册实例关闭视频的声音:myVid=document.getElementById("video1");myV...
HTML事件属性onsubmit提交表单时会触发 onsubmit 属性事件。HTML5中的新功能没有。句法form onsubmit="script"支持的标签form, k...
HTML事件属性ondragstart触发 ondragstart 属性当开始拖动元素或文本选择。要使元素可拖动,请标记该元素与全局HTML5draggable ...
HTML canvas beginPath() 方法 HTML canvas 参考手册实例在画布上绘制两条路径;绿色和紫色:var c=document.getElementById(myC...
ISO语言代码HTML的lang属性可用于声明网页或部分网页的语言,这对搜索引擎和浏览器是有帮助的。根据W3C推荐标准,您应该通过html...
HTML5 canvas 参考手册描述HTML5 canvas 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,canvas 元素本身并没有绘制能...