startDrag = function (event) {
draggable._offY = event.clientY - parseInt(draggable.element.offsetTop);
draggable._offX = event.clientX - parseInt(draggable.element.offsetLeft);
draggable._boundsXR = (draggable._parent.offsetLeft + draggable._parent.offsetWidth) - draggable.element.offsetWidth;
draggable._boundsXL = draggable._parent.offsetLeft;
draggable._boundsXT = draggable._parent.offsetTop;
draggable._boundsXB = (draggable._parent.offsetTop + draggable._parent.offsetHeight) - draggable.element.offsetHeight;
if (draggable._ghosting) {
ghost = draggable.element.cloneNode();
ghost.className = ghost.className + ' ghost';
draggable.element.parentNode.appendChild(ghost);
ghost.style.opacity = 0.2;
ghost.style.position = 'absolute';
ghost.style.left = draggable.element.offsetLeft + 'px';
ghost.style.top = draggable.element.offsetTop + 'px';
}
draggable._parent.addEventListener('mouseup', function () {
endDrag();
}, false);
draggable._parent.addEventListener('mousemove', drag, true);
};
draggable.prototype._create = function () {
var draggable = this,
ghost,
drag = function (event) {
//TODO: really cool that on move here you could almost make online paint, didn't even think of that.
// ghost = draggable.element.cloneNode();
// ghost.style.opacity = 0.5;
// document.querySelector('body').appendChild(ghost);
draggable.element.style.position = 'absolute';
draggable._newY = event.clientY - draggable._offY;
draggable._newX = event.clientX - draggable._offX;
if (draggable._contained) {
if (draggable._newX < draggable._boundsXL) {
draggable._newX = draggable._boundsXL;
}
if (draggable._newX > draggable._boundsXR) {
draggable._newX = draggable._boundsXR;
}
if (draggable._newY > draggable._boundsXB) {
draggable._newY = draggable._boundsXB;
}
if (draggable._newY < draggable._boundsXT) {
draggable._newY = draggable._boundsXT;
}
}
if (draggable._horizontal) {
draggable.element.style.left = draggable._newX + 'px';
}
if (draggable._vertical) {
draggable.element.style.top = draggable._newY + 'px';
}
},
endDrag = function () {
if (draggable._ghosting) {
[].forEach.call(document.querySelectorAll('.ghost'), function (ghost) {
ghost.remove();
});
}
draggable._parent.removeEventListener('mousemove', drag, true);
if (draggable._pens && draggable._pens.length > 0) {
var penned = false,
currentPen = draggable.element.parentNode,
isAPen = function (element) {
for (var i = 0; i <= draggable._pens.length - 1; i++) {
if (currentPen === draggable._pens[i]) {
return true;
}
};
};
for (var i = 0; i < draggable._pens.length - 1; i++) {
if (draggable._newX < (draggable._pens[i].offsetLeft + draggable._pens[i].offsetWidth) && draggable._newX > (draggable._pens[i].offsetLeft - draggable.element.offsetWidth) && draggable._newY > (draggable._pens[i].offsetTop - draggable.element.offsetHeight) && draggable._newY < (draggable._pens[i].offsetTop + draggable._pens[i].offsetHeight + draggable.element.offsetHeight)) {
penned = true;
draggable.element.style.position = '';
draggable._pens[i].appendChild(draggable.element);
break;
}
};
if (!penned) {
if (draggable._roam) {
document.querySelector('body').appendChild(draggable.element);
} else {
if (isAPen(currentPen)) {
currentPen.appendChild(draggable.element);
draggable.element.style.position = '';
}
}
}
}
},
startDrag = function (event) {
draggable._offY = event.clientY - parseInt(draggable.element.offsetTop);
draggable._offX = event.clientX - parseInt(draggable.element.offsetLeft);
draggable._boundsXR = (draggable._parent.offsetLeft + draggable._parent.offsetWidth) - draggable.element.offsetWidth;
draggable._boundsXL = draggable._parent.offsetLeft;
draggable._boundsXT = draggable._parent.offsetTop;
draggable._boundsXB = (draggable._parent.offsetTop + draggable._parent.offsetHeight) - draggable.element.offsetHeight;
if (draggable._ghosting) {
ghost = draggable.element.cloneNode();
ghost.className = ghost.className + ' ghost';
draggable.element.parentNode.appendChild(ghost);
ghost.style.opacity = 0.2;
ghost.style.position = 'absolute';
ghost.style.left = draggable.element.offsetLeft + 'px';
ghost.style.top = draggable.element.offsetTop + 'px';
}
draggable._parent.addEventListener('mouseup', function () {
endDrag();
}, false);
draggable._parent.addEventListener('mousemove', drag, true);
};
draggable.element.className = draggable.element.className + ' drggable';
draggable.element.addEventListener('mousedown', startDrag, false);
draggable.element.addEventListener('mouseup', endDrag, false);
}