CODEWITHSUNDEEP
javascripthtml
user4207046
user4207046

Reputation:

Javascript drag over event doesn't work

I'm trying to make a simple drag and drop with native js and it does not seem to work. The console.log here doesn't show. What am I missing?

var drag = document.getElementById('drag'),
  drop = document.getElementById('dropped');

drag.addEventListener('dragstart', function(e) {
  e.preventDefault();
  console.log('drag');
})

drop.addEventListener('drop', function(e) {
  e.preventDefault();
  conosle.log(e);
})
drop.addEventListener('dragover', function(e) {
  e.preventDefault();
  conosle.log(e);
})
#dropped {

  background: #000;

  width: 400px;

  height: 400px;

}
<div id="drag" draggable="true">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eveniet illo, nisi placeat neque voluptatem sit ipsam corporis. Veritatis dicta perspiciatis temporibus error amet. Laborum, vero amet magnam nihil debitis!</p>
</div>

<div id="dropped">

</div>

Upvotes: 1

Views: 3263

Answers (1)

Shomz
Shomz

Reputation: 37711

You shouldn't prevent default when using native JS for dragging. See here: 

var drag = document.getElementById('drag'),
  drop = document.getElementById('dropped');

drag.addEventListener('dragstart', function(e) {
  console.log('drag');
})

drop.addEventListener('drop', function(e) {
  e.preventDefault();
  console.log(e);
  alert('dropped!');
})
drop.addEventListener('dragover', function(e) {
  e.preventDefault();
})
#dropped {
  background: #000;
  width: 400px;
  height: 400px;
}
<div id="drag" draggable="true">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eveniet illo, nisi placeat neque voluptatem sit ipsam corporis. Veritatis dicta perspiciatis temporibus error amet. Laborum, vero amet magnam nihil debitis!</p>
</div>

<div id="dropped">

</div>

A little explanation about preventDefault() and where and why it should be used:

Calling the preventDefault method during both a dragenter and dragover event will indicate that a drop is allowed at that location. However, you will commonly wish to call the preventDefault method only in certain situations, for example, only if a link is being dragged. To do this, call a function which checks a condition and only cancels the event when the condition is met. If the condition is not met, don't cancel the event, and a drop will not occur there if the user releases the mouse button.

A listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped. Most areas of a web page or application are not valid places to drop data. Thus, the default handling for these events is to not allow a drop.

If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's event.preventDefault method. The latter may be more feasible in a function defined in a separate script.

In a web page, you should call the preventDefault method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

All the quotes taken from: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Upvotes: 3

Related Questions