Of Stack

javascript html5 Easily implements drag function

  • 2021-07-24 10:09:54
  • OfStack

Drag-and-drop (drag and drop) are the components of html5 standard. We will describe them from five aspects, namely, how to become a drag object, how to become a drag target, the events owned by a drag object, the events owned by a drag target and how to transfer information between drag-and-drop objects.

Drag an event owned on an object

dragstart (triggered when the object is just dragged) drag (triggered after the dragstart event is triggered) dragend (triggered at the end of a drag event)

Drag Events Owned on Destination

dragenter (Triggered when the element is dragged into the drop target) dragover (triggered when the drag element moves in the drop target, similar to mouseover) drop (Triggered when the drag element is placed in the drop target)

How to become a drag object

In html, img elements can be dragged by default, and other elements can be dragged by setting draggable=true.

< div draggable="true" > < /div >

How to be a drag target

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


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 an dataTransfer object in the event, which has two commonly used methods, setData () and getData (), for storing and obtaining drag information, respectively. Among them, setData () can only be set at the beginning of the drag event, that is, when the dragstart event is set, while getData () is generally obtained when the drop event is triggered, that is, when the drop event is triggered. 


// drapobj  Drag element 
// droptarget  Place the target 
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 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5  Drag and drop </title>
</head>

<body>
  <div draggable="true"></div>
  <div style="height: 150px" id="dragobj" draggable="true">
    <img src="c_06.jpg" alt="">
  </div>
  <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj  Drag element 
// droptarget  Place the target 
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>

Existing problems

Drag and drop pictures in Firefox browser to open a new window by default. According to javascript advanced programming, the default event is prohibited in drop event, which does not solve the problem.

Solution: If you use the picture as the background picture of div and div as a drag object, this problem does not exist.

Final code 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5  Drag and drop </title>
  <style>
  div {
    width: 120px;
    height: 136px;
  }
  
  #dragobj {
    background: url('c_06.jpg') no-repeat;
  }
  
  #droptarget {
    background-color: #eee;
  }
  </style>
</head>

<body>
  <div id="dragobj" draggable="true">
  </div>
  <div id="droptarget"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj  Drag element 
// droptarget  Place the target 
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>
Related articles: