Home / Questions / 49951
Accepted
Edwin V
Asked: 2020-02-17 12:06:26 +0800 CST 2020-02-17 12:06:26 +0800 CST

Register listeners in javascript classes

  • 772

i am trying to create a javascript class for a droparea, i tried two different ways. The Droparea class allows me to access the object's properties but when the drop event occurs, e.preventDefault does not work. The Droparea2 class allows me to avoid the default behavior of the drop event, but it does not allow me to access the object's properties. Any solution? I prefer not to use any plugin.

class Droparea {
	// Contructor
	constructor(div, property1){
		this.div = div;
		this.property1 = property1;
	}

	// Metodos 
	registerEvents(){
		this.in();
		this.out();
		this.drop();
		return;
	}

	in(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('dragover',function(){
			div.style.background = "yellow";
      div.innerHTML = property1 + '1';
		},false);
	}

	out(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('dragleave',function(e){
			e.stopPropagation();
			e.preventDefault();
			div.style.background = "blue";
      div.innerHTML = property1 + '2';
		},false);
	}

	drop(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('drop',function(e){
			e.stopPropagation();
			e.preventDefault();
			div.style.background = "red";
      div.innerHTML = property1 + '3';
		},false);
	}
}

class Droparea2 {
	// Contructor
	constructor(div, property1){
		this.div = div;
		this.property1 = property1;
	}

	// Metodos 
	registerEvents(){
    this.div.addEventListener('dragover',this.in,false);
    this.div.addEventListener('dragleave',this.out,false);
    this.div.addEventListener('drop',this.drop,false);
	}

	in(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'yellow';
	}

	out(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'blue';
    e.target.innerHTML = this.property1;
	}

	drop(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'red';
	}
}
var div = document.querySelector('.droparea');
var drop = new Droparea(div,'Something');
var div2 = document.querySelector('.droparea2');
var drop2 = new Droparea2(div2,'Something');
drop.registerEvents();
drop2.registerEvents();
.droparea {
  background: gray;
  height: 200px;
}

.droparea2 {
  background: darkgray;
  height: 200px;
}
<div class="droparea">Arrastra tu elemento aqui. 1</div>
<div class="droparea2">Arrastra tu elemento aqui. 2</div>

javascript

1 Answers

  1. Best Answer

    If you register the listeners, the problem is that you forgot to prevent the default action on the event dragover:

    div.addEventListener('dragover', function(e) {
  e.preventDefault(); // omitiste aquí
  div.style.background = "yellow";
  div.innerHTML = property1 + '1';
});

    Remember that you must prevent events in events dragover, dragleaveand dropif you want to customize behaviors. Also, if you want to use a dataTransferyou can simulate one with an instance object, since the original object dataTransferis only available in dragstartand drop. I leave you an example of this.

    Example DnD and File API

    class AvatarUpload {
	constructor(id, data) {
  	this.$el = document.getElementById(id);
    this.data = data;
    // simula el dataTransfer nativo
    this.dataTransfer = {};
    this.bindEvents();
  }
  
  bindEvents () {
  	this.$el.addEventListener('dragover', this.over.bind(this));
    this.$el.addEventListener('dragleave', this.leave.bind(this));
    this.$el.addEventListener('drop', this.drop.bind(this));
  }
  
  over (e) {
  	e.preventDefault();
    this.dataTransfer.name = 'John Doe';
    this.$el.classList.add('over');
  }
  
  leave (e) {
  	e.preventDefault();
    this.$el.classList.remove('over');
  }
  
  drop (e) {
  	e.preventDefault();
    this.$el.classList.remove('over');
    this.toBase64(e).then(str => {
      this.$el.textContent = '';
    	this.$el.style.backgroundImage = `url(${str})`;
      console.log('Propiedades propias:', this.data);
      console.log('DataTransfer:', this.dataTransfer);
      this.dataTransfer = {}; // reinicializa dataTransfer
    });
  }
  
  toBase64(e) {
  	return new Promise(resolve => {
    	let fileReader = new FileReader();
      let file = e.dataTransfer.files[0];
      fileReader.onload = function () {
      	resolve(this.result);
      }
      fileReader.readAsDataURL(file);
    });
  }
}

new AvatarUpload('area', { property: 'Photo' });
    @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

#area {
  background-size: cover;
  border: 3px dashed #ccc;
  border-radius: 4px;
  color: #555;
  font-family: 'josefin sans';
  font-size: 22px;
  height: 200px;
  line-height: 200px;
  margin: 20px auto;
  text-align: center;
  width: 200px;
}

#area.over {
  border-color: #f39c12;
}
    <div id="area">
  Arrastra tu foto aquí
</div>

    • 2