- 1 < !DOCTYPE html > 2 < html lang = "en" > 3 4 < head > 5 < meta charset = "UTF-8" > 6 < title > HTML5拖拽 < /title>
- 7 <style>
- 8 div {
- 9 width: 120px;
- 10 height: 136px;
- 11 }
- 12
- 13 #dragobj {
- 14 background: url('c_06.jpg') no-repeat;
- 15 }
- 16
- 17 #droptarget {
- 18 background-color: #eee;
- 19 }
- 20 </style > 21 < /head>
- 22
- 23 <body>
- 24 <div id="dragobj" draggable="true">
- 25 </div > 26 < div id = "droptarget" > </div>
- 27 </body > 28 < script > 29
- var droptarget = document.getElementById('droptarget');
- 30
- var dragobj = document.getElementById('dragobj');
- 31 32 // drapobj 拖拽元素
- 33 // droptarget 放置目标
- 34 dragobj.addEventListener('dragstart',
- function(event) {
- 35 event.dataTransfer.setData('id', dragobj.id);
- 36
- });
- 37 droptarget.addEventListener('dragenter',
- function(event) {
- 38 event.preventDefault();
- 39
- });
- 40 droptarget.addEventListener('dragover',
- function(event) {
- 41 event.preventDefault();
- 42
- });
- 43 droptarget.addEventListener('drop',
- function(event) {
- 44
- var id = event.dataTransfer.getData('id');
- 45
- var obj = document.getElementById(id);
- 46 event.preventDefault();
- 47 this.appendChild(obj);
- 48
- });
- 49 < /script>
- 50
- 51 </html >
来源: