<div class="draggable"></div>
.draggable {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
background: #19F;
border-radius: 8px;
cursor: move;
}
var dragElem = document.querySelector('.draggable');
var x = 0;
var y = 0;
var dragStartX, dragStartY, pointerDownX, pointerDownY;
dragElem.addEventListener( 'mousedown', function( event ) {
// keep track of start positions
dragStartX = x;
dragStartY = y;
pointerDownX = event.pageX;
pointerDownY = event.pageY;
// add move & up events
window.addEventListener( 'mousemove', onmousemove );
window.addEventListener( 'mouseup', onmouseup );
});
function onmousemove( event ) {
// how much has moved
var moveX = event.pageX - pointerDownX;
var moveY = event.pageY - pointerDownY;
// add movement to position
x = dragStartX + moveX;
y = dragStartY + moveY;
// position element
dragElem.style.left = x + 'px';
dragElem.style.top = y + 'px';
}
function onmouseup() {
// remove move & up events
window.removeEventListener( 'mousemove', onmousemove );
window.removeEventListener( 'mouseup', onmouseup );
}
Also see: Tab Triggers