Drag and drop HTML5 demo

Drag and drop with pure JavaScript using html5

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () {
                    return fn.call(el, window.event);
                });
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    }
})();

var eat = ['Cool', 'Drag', 'Drop', 'HTML5'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/
0;
yum.style.opacity = 1;

var links = document.querySelectorAll('li > a'),
    el = null;
for (var i = 0; i < links.length; i++) {
    el = links[i];

    el.setAttribute('draggable', 'true');

    addEvent(el, 'dragstart', function (e) {
        e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
        e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
}

var bin = document.querySelector('#bin');

addEvent(bin, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
});

// to get IE to work
addEvent(bin, 'dragenter', function (e) {
    this.className = 'over';
    return false;
});

addEvent(bin, 'dragleave', function () {
    this.className = '';
});

addEvent(bin, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));

    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    bin.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    bin.appendChild(y);

    setTimeout(function () {
        var t = setInterval(function () {
            if (y.style.opacity <= 0) {
                if (msie) { // don't bother with the animation
                    y.style.display = 'none';
                }
                clearInterval(t);
            } else {
                y.style.opacity -= 0.1;
            }
        }, 50);
    }, 250);

    return false;
});
Drag and drop HTML5 demo Drag and drop HTML5 demo Reviewed by Bhaumik Patel on 6:19 AM Rating: 5