search

Home >Web Front-end >H5 Tutorial >How to implement element dragging in HTML5_html5 tutorial skills

How to implement element dragging in HTML5_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:51:441622browse

Many front-ends probably don’t understand how to implement HTML5 drag and drop. This article gives you some ideas. Organize and back up files for easy reference later.

First example:

index.html

XML/HTML CodeCopy content to clipboard
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Dragtitle>  
  6.     <style>  
  7.         .box{   
  8.             width: 400px;   
  9.             height: 400px;   
  10.             float: left;   
  11.         }   
  12.         #box1{   
  13.             background: #CCC;   
  14.         }   
  15.         #box2{   
  16.             background: #FF0;   
  17.         }   
  18.     style>  
  19. head>  
  20. <body>  
  21. <div id="box1" class="box">div>  
  22. <div id="box2" class="box">div>  
  23. <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
JavaScript Code复制内容到剪贴板
  1. "app1.js">   
  2.   
  3.   
  4.   
  5. app1.js   
  6. /** 
  7.  *   app1.js  
  8.  */  
  9.   
  10. var oBox1,   
  11.     oBox2,   
  12.     oImg1;   
  13.   
  14. window.onload = function(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = function(e){   
  21.         e.preventDefault();   
  22.     };   
  23.   
  24.     //   
  25.     oImg1.ondragstart = function(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     };   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. };   
  32.   
  33. function dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

Involving knowledge points

The following events will be triggered during the drag and drop process:
Trigger an event on the drag target (source element)
ondragstart - the user starts dragging the element Triggered when
ondrag - Triggered when the element is being dragged
ondragend - Triggered after the user has finished dragging the element

Event triggered when the target is released
 ondragenter - This event is triggered when the object dragged by the mouse enters its container scope
ondragover - When an object is dragged This event is triggered when the dragged object is dragged within the container range of another object
ondragleave - This event is triggered when the object being dragged by the mouse leaves the container range
ondrop - During a dragging process, This event is triggered when the mouse button is released

event object (replaced by e)

e.target

The explanation on W3Cschool is: Return the element that triggered this event (the target node of the event). This target attribute is only compatible with ie9 and above

e.preventDefault()

Cancel the default action of the event.

e.dataTransfer.setData()

Set the data type and value of the dragged data:

Copy the code
The code is as follows:
e. dataTransfer.setData("Text",ev.target.id); //The first parameter is Text (lowercase is also acceptable)

e.dataTransfer.getData()

Get the dragged data:

Copy the code
The code is as follows:
e.dataTransfer.getData( "Text");

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Original text: http://www.cnblogs.com/oovwall/p/5213580.html

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5: The biggest leap forward in web standards_html5 tutorial tipsNext article：HTML5: The biggest leap forward in web standards_html5 tutorial tips

Related articles

See more