1

estoy tratando de crear una clase javascript para un droparea, traté dos maneras distintas. La clase Droparea me permite acceder a las propiedades del objeto pero al presentarse el evento drop, no funciona e.preventDefault. La clase Droparea2 permite evitar el comportamiento por defecto del evento drop, pero no me permite acceder a las propiedades del objeto, ¿Alguna solución?. Prefiero no utilizar ningun 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>

1 respuesta 1

2

Si registra los listeners, el problema es que olvidaste prevenir la acción por defecto en el evento dragover:

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

Recuerda que debes prevenir los eventos en los eventos dragover, dragleave y drop si quieres personalizar comportamientos. Además, en caso desees usar un dataTransfer puedes simular uno con un objeto de instancia, ya que el objeto original dataTransfer solo está disponible en dragstart y drop. Te dejo un ejemplo de ésto.

Ejemplo DnD y 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
  • Gracias por tu respuesta @Guz, podrias explicarme un poco la parte de { property: 'Photo' }, no entiendo de donde saca la informacion que le envia al constructor.
    – Edwin V
    el 16 feb. 2017 a las 23:01
  • Ese objeto no tiene mayor importancia. Lo puse como analogía a lo que haces tú al pasar un segundo parámetro. No tiene importancia.
    – gugadev
    el 16 feb. 2017 a las 23:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.