Demo for uidrag

by bgrins

HTML

<h1>There should be an "uidrag", "uidragstart", and "uidragstop" events!</h1>
<p>The <a href='http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html'>native drag events aren't good</a>.  And every time I want to build a demo with advanced mouse / touch handling I have to reimplement the wheel (or in clude jQuery).
</p>

<p>It should be an event you can bind to like: document.addEventListener("onmousedrag", function() {}, false);
</p>

<h2>Demo</h2>
<div id='el'><div id='spot'></div></div>

CSS

#el { margin: 0 auto; border: solid 10px; width: 200px; height:200px; position:relative; }
#spot { position:absolute; top:0; left:0; width: 6px; height:6px; border:solid 2px; border-radius: 4px; }
#spot.dragging { border-color: orange; }

JavaScript

window.onload = function() {
    
var spot = document.getElementById('spot');
var el = document.getElementById("el");

    
el.addEventListener("uidrag", function(e) {
    console.log("DRAG");
});

el.addEventListener("uidragstart", function(e) {
    e.preventDefault();
});
    
el.addEventListener("uidragend", function(e) {
    
});

tinydrag(el, demoDragMove, demoDragStart, demoDragStop);
         
function demoDragMove(x, y) {
   spot.style.top = (y - (spot.offsetHeight / 2)) + "px";
   spot.style.left = (x - (spot.offsetWidth / 2)) + "px";;
} 
function demoDragStart(x, y) {
   spot.className = "dragging";
} 
function demoDragStop(x, y) {
   spot.className = "";
} 

};

/**
Lightweight drag helper.  Handles containment within the element, so that when dragging, the x is within [0,element.width] and y is within [0,element.height]
 */
(function(window, document, $) {

    var jQueryExists = typeof $ === "undefined";
    
    if (!("addEventListener" in document)) {
        return;    
    }
        
    function bind(el, name, cb) {
        if (typeof name === "object") {
            for (var i in name) {
                el.addEventListener(i, name[i], false); 
            }   
        }
        else {
             el.addEventListener(name, cb, false);   
        }
    }
    
    function unbind(el, name, cb) {
        if (typeof name === "object") {
            for (var i in name) {
                el.removeEventListener(i, name[i], false); 
            }   
        }
        else {
             el.removeEventListener(name, cb, false);   
        }
    }
    
    
    
    
window.tinydrag = draggable;
    
function draggable(element, onmove, onstart, onstop) {
    onmove = onmove || function() { };
    onstart = onstart || function() { };
    onstop = onstop || function() { };
    
    var doc = element.ownerDocument || document;
    var dragging = false;
    var offset = { };
    var maxHeight = 0;
    var maxWidth = 0;
    var IE =...