Vex Dialog — Confirm Before Navigating

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<script>vex.defaultOptions.className = 'vex-theme-default';</script>
<style>
.vex-content[draggable] {
    cursor: -webkit-grab
}

JavaScript

var $vexContent = vex.dialog.alert({
    closeOnOverlayClick: false,
    message: 'Drag me'
});

$vexContent.attr('draggable', true);

$vexContent[0].addEventListener('dragstart', function(event) {
    var style, boundingClientRect, data;
    style = window.getComputedStyle($vexContent[0]);
    boundingClientRect = $vexContent[0].getBoundingClientRect();
    data = (parseInt(style.getPropertyValue('left'),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue('top'),10) - event.clientY);
    if (style.getPropertyValue('left') === 'auto') {
        data = (- event.clientX) + ',' + (- event.clientY);
    }
    event.dataTransfer.setData('text/plain', data);
}, false);

document.body.addEventListener('dragover', function(){ 
    event.preventDefault(); 
    return false; 
}, false);

document.body.addEventListener('drop', function(event) { 
    var offset = event.dataTransfer.getData('text/plain').split(',');
    $vexContent[0].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
    $vexContent[0].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
    event.preventDefault();
    return false;
}, false);