<!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>