Detailed explanation of techniques for easily implementing drag function in JavaScript HTML5

This article mainly introduces you in detailjavascript html5Easily implement the drag function, which has certain reference value. Interested friends can refer to it

Drag and drop (drag and drop) are HTML5 standard components. Below we describe them from five aspects, namely how to become a drag object, how to become a drag target, and the events on the dragged object. , the events owned by the drag target and how to transfer information between drag and drop objects.

Events owned by the dragging object

• dragstart (triggered when the object is just dragged)

• drag (triggered after the dragstart event is triggered)

• dragend (triggered when the drag event ends)
  

Events owned on the drag target

• dragenter (triggered when the dragged element enters the drop target)

• dragover (triggered when the drag element is moved in the drop target, similar to mouseover)

• drop (triggered when the drag element is placed in the drop target)
  

How to become a draggable object

In HTML, the img element can be dragged by default, and other elements need to be set to draggable=true. You can drag it.

<p draggable="true"></p>

How to become a drag target

#In html, elements cannot become drop targets by default, only when we disable the default behavior of drapenter and drapover events, Can be called a drag-and-drop target.

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

How to transfer information between drag and drop objects

There is a dataTransferobject in the event, which has two common methods setData() and getData(), used to store drag and drop information and obtain drag and drop information respectively. Among them, setData() can only be set at the beginning of the drag event, that is, when the dragstart event is set, and getData() is generally obtained when the drop event is triggered, that is, when the drop event is triggered.

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

Complete code

  
  




  <p draggable="true"></p>
  

    
  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

There is a problem

Drag and drop pictures in Firefox browserDefault Open a new window and disable the default event in the drop event according to JavaScript Advanced Programming, which does not solve the problem.

Solution: If you use the image as the background image of p and p as the drag object, this problem will not exist.

Final code

  
  
  




  

  
  


<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

The above is the detailed content of Detailed explanation of techniques for easily implementing drag function in JavaScript HTML5. For more information, please follow other related articles on the PHP Chinese website!