京东自营 618 + 国补 iPhone 历史最低价
html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE HTML>2
<html>3
<head>4
<meta charset="utf-8">5
<title>时代Java与您共同学习(NowJava.com)</title>6
<style>7
.droptarget {8
float: left; 9
width: 100px; 10
height: 35px;11
margin: 15px;12
padding: 10px;13
border: 1px solid #aaaaaa;14
}15
</style>16
</head>17
<body>18
19
<p>该实例演示了如何向 p 元素添加 "ondragstart" 和 "ondrag" 事件及向 div 元素添加 "ondragover" 和 "ondrop" 事件。 </p>20
<p>在两个矩形框中来回拖动 p 元素:</p>21
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">22
<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">拖动我!</p>23
</div>24
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>25
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>26
<p id="demo"></p>27
<script>28
/* 拖动时触发 */29
function dragStart(event) {30
event.dataTransfer.setData("Text", event.target.id);31
document.getElementById("demo").innerHTML = "开始拖动 p 元素";32
}33
function dragEnd(event) {34
document.getElementById("demo").innerHTML = "完成 p 元素的拖动。";35
}36
/* E拖动完成后触发 */37
function allowDrop(event) {38
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java