[SOLUCIONADO] Drag and drop burbujeo o no?

patilanz · #1 (**permalink**) 27/04/2014, 11:47

Hola estoy haciendo algo con la api de drag and drop de html5 pero descubri que por ejemplo quiero soltar un div en otro que contiene otras cosas dentro en los que si se suelta el div no lo detecta como drop.
Por ejemplo

Código HTML:

Ver original<div draggable="true">Arrastra me</div>
 
<div id="eventos_a_este_div"><div>Sueltame aqui</div></div>

Esto no funciona. Ya que cuando entra el div draggable en el otro este hace el efecto que tiene que hacer con el evento dragover pero si lo suelto exactamente donde las letras no funciona.

Como solucionar esto?

Saludos

jgdev13 · #2 (**permalink**) 28/04/2014, 04:53

Puedes hacerlo de ésta forma:

Código HTML:

Ver original<div draggable="true">Arrastra me</div>
 
<div id="eventos_a_este_div">
  <div class="title">Sueltame aqui</div>
  <div class="content"><!-- Contenido --></div>
</div>

Luego haces la referencia de los eventos al div #elementos_a_este_div .content:

Código Javascript:

Ver original// Jquery
$('#elementos_a_este_div .content').on('eventName', function() { ... });
// Sólo javascript
document.querySelector('#elementos_a_este_div .content').eventName = function() { ... };

Un saludo ;)

IsaBelM · #3 (**permalink**) 28/04/2014, 07:04

con este código no tendrás ese problema

Cita:

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<style>
* {
margin: 0;
border: none;
position: relative;
}

html {
height: 100%;
}

body {
width: 100%;
height: 100%;
}

#caja1 {
width: 6%;
height: 16%;
float: left;
top: 47%;
left: 30%;
background-color: rgb(255, 0, 0);
border: 1px solid;
z-index: 99;
cursor: move;
}

#caja2 {
width: 12%;
height: 32%;
float: left;
top: 43%;
left: 49%;
background-color: rgb(255, 255, 0);
border: 1px solid;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {

new dragANDdrop('#caja1', '#caja2');

}, false);

function dragANDdrop(c1, c2) {

this.box1 = document.querySelector(c1);
this.box2 = document.querySelector(c2);
this.offset1 = {}, this.offset2 = {};
this.foo;
this.posXbox1 = this.box1.offsetLeft;
this.posYbox1 = this.box1.offsetTop;
this.posXbox2 = this.box2.offsetLeft;
this.posYbox2 = this.box2.offsetTop;
this.box1W = this.box1.offsetWidth;
this.box1H = this.box1.offsetHeight;
this.box2H = this.box2.offsetHeight;
this.leftright = this.posXbox2 + this.box1W;
this.topbottom = (this.posYbox2 + this.box2H) - this.box1H;

if (window.matchMedia('only screen and (max-width: 767px)').matches) {

this.dragANDdropInitMobil();

} else {

this.dragANDdropInitPc();
}
}

dragANDdrop.prototype.dragANDdropInitPc = function() {

var _this = this;

this.box1.addEventListener('mousedown', function(evt) {

evt.preventDefault();
evt.stopPropagation();

_this.offset1 = {x : (evt.pageX) ? evt.pageX : window.event.clientX, y : (evt.pageY) ? evt.pageY : window.event.clientY};

document.body.addEventListener('mousemove', _this.foo = function(evt) {

evt.preventDefault();
evt.stopPropagation();

_this.offset2 = {x : (evt.pageX) ? evt.pageX : window.event.clientX, y : (evt.pageY) ? evt.pageY : window.event.clientY};

if (_this.offset2.x != _this.offset1.x || _this.offset2.y != _this.offset1.y) {

_this.posXbox1 += (_this.offset2.x - _this.offset1.x);
_this.posYbox1 += (_this.offset2.y - _this.offset1.y);

_this.box1.style.left = _this.posXbox1 + 'px';
_this.box1.style.top = _this.posYbox1 + 'px';

_this.offset1.x = _this.offset2.x;
_this.offset1.y = _this.offset2.y;
}

}, false);

}, false);

this.box1.addEventListener('mouseup', function(evt) {

evt.preventDefault();
evt.stopPropagation();

document.body.removeEventListener('mousemove', _this.foo, false);

if (((parseInt(this.style.left) >= _this.posXbox2) && parseInt(this.style.left) <= _this.leftright) && ((parseInt(this.style.top) >= _this.posYbox2) && parseInt(this.style.top) <= _this.topbottom)) {

this.style.backgroundColor = 'rgb(0, 128, 0)';

} else {

this.style.backgroundColor = 'rgb(255, 0, 0)';
}

}, false);

}

dragANDdrop.prototype.dragANDdropInitMobil = function() {

var _this = this;

this.box1.addEventListener('touchstart', function(evt) {

evt.preventDefault();
evt.stopPropagation();

_this.offset1 = {x : (evt.touches[0].pageX) ? evt.touches[0].pageX : evt.touches[0].clientX, y : (evt.touches[0].pageY) ? evt.touches[0].pageY : evt.touches[0].clientY};

document.body.addEventListener('touchmove', _this.foo = function(evt) {

evt.preventDefault();
evt.stopPropagation();

_this.offset2 = {x : (evt.touches[0].pageX) ? evt.touches[0].pageX : evt.touches[0].clientX, y : (evt.touches[0].pageY) ? evt.touches[0].pageY : evt.touches[0].clientY};

if (_this.offset2.x != _this.offset1.x || _this.offset2.y != _this.offset1.y) {

_this.posXbox1 += (_this.offset2.x - _this.offset1.x);
_this.posYbox1 += (_this.offset2.y - _this.offset1.y);

_this.box1.style.left = _this.posXbox1 + 'px';
_this.box1.style.top = _this.posYbox1 + 'px';

_this.offset1.x = _this.offset2.x;
_this.offset1.y = _this.offset2.y;
}

}, false);

}, false);

this.box1.addEventListener('touchend', function(evt) {

evt.preventDefault();
evt.stopPropagation();

document.body.removeEventListener('touchmove', _this.foo, false);

if (((parseInt(this.style.left) >= _this.posXbox2) && parseInt(this.style.left) <= _this.leftright) && ((parseInt(this.style.top) >= _this.posYbox2) && parseInt(this.style.top) <= _this.topbottom)) {

this.style.backgroundColor = 'rgb(0, 128, 0)';

} else {

this.style.backgroundColor = 'rgb(255, 0, 0)';
}

}, false);
}

window.matchMedia || (window.matchMedia = function() {
"use strict";

// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);

// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;

style.type = 'text/css';
style.id = 'matchmediajs-test';

script.parentNode.insertBefore(style, script);

// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}

// Test if media query is true or false
return info.width === '1px';
}
};
}

return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
</script>
</head>
<body>

<div id="caja1"></div>
<div id="caja2"></div>

</body>
</html>

patilanz · #4 (**permalink**) 28/04/2014, 15:09

Hola
jgdev13 los divs están organizados de la misma manera solo que seleccionas el contenido pero no el texto por lo que el resultado seria el mismo o no?
IsaBelM tu codigo me parecio muy interesante pero me puedes explicar esta function ?

Código Javascript:

Ver originalfunction cssComputado(obj, styleProp) {
 
if (obj == null) { return 0; }
 
if (window.getComputedStyle) {
 
var valor = window.getComputedStyle(obj, null)[styleProp];
 
} else if (obj.currentStyle) {
 
var valor = (/(em)/.test(obj.currentStyle[styleProp])) ? parseInt(obj.currentStyle[styleProp], 10) * 16 : obj.currentStyle[styleProp];
}
 
return valor;
}

Y una observación al arrastrar el div en el otro lo detecta solo cuando el ratón también este dentro dentro en cambio no. Esto daría problemas si se le agrega mas width o height

Gracias

IsaBelM · #5 (**permalink**) 30/04/2014, 04:49

Cita:

Iniciado por patilanz

IsaBelM tu codigo me parecio muy interesante pero me puedes explicar esta function ?

Esta función se usa para leer el css computado. O, lo que es lo mismo para leer el css que está y que no está en línea

css embebido

Cita:

#selector [
width:30px;
}

document.getElementById('selector').style.width // no obtenemos el valor
parseInt(cssComputado(document.getElementById('sel ector'), 'width')) // 30

css en línea

Cita:

<div id="selector" style="width:30px"></div>

document.getElementById('selector').style.width // 30px
parseInt(cssComputado(document.getElementById('sel ector'), 'width')) // 30

Cita:

Iniciado por patilanz

Y una observación al arrastrar el div en el otro lo detecta solo cuando el ratón también este dentro dentro en cambio no. Esto daría problemas si se le agrega mas width o height

edité el código antes de publicarlo sin pensar en esa consecuencia. he editado mi post anterior sin la edición

patilanz · #6 (**permalink**) 24/07/2014, 09:48

Resolvi el problema agrengado un div que esta dentro del div en el que se van a arrastrar cosas pero esta display:none y cuando se empieza a arrastrar lo pongo sobre todo el div y las cosas que contiene pero es invisible.