Drag and action

element.onDiscard(func());

by Felipe Alfaro

HTML

<ul id="test">
    <li>Test here 1</li>
    <li>Test here 2</li>
    <li>Test here 3</li>
    <li>Test here 4</li>
    <li>Test here 5</li>
    <li>Test here 6</li>
    <li>Test here 7</li>
    <li>Test here 8</li>
    <li>Test here 9</li>
    <li>Test here 10</li>
</ul>
<pre id="code"></pre>

CSS

ul{
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 300px;
}
li{
    display: block;
    margin: 0;
    padding: 15px 25px;
    background: purple;
    font-family: helvetica neue;
    font-weight: lighter;
    color: white;
}

JavaScript

(function(doc){

	// Plugin
	Element.prototype.onDiscard = function($function){
        var mouseDown = false,
        	onTransition = false,
            actionLimit = 200,
            el = this;
        el.onmousedown = function(e){
        	e.preventDefault();
        	var initTranslate = 0;
            var initBlur = 0;
        	mouseDown = true;
            document.onmousemove = function(e){
            	if(mouseDown){
                	onTransition = true;
                    initTranslate += e.movementX;
                    initBlur += e.movementX;
                    el.style.transform = 'translateX('+initTranslate+'px)';
                    el.style.webkitFilter = 'blur('+initBlur/60+'px)';
                    el.style.opacity = 1-initTranslate/actionLimit;
                    if(initTranslate>=actionLimit){
                        if($function){
                            $function(el);
                        }else{
                            this.remove();
                        }
                        mouseDown = false;
                    }
                }
            };
            document.onmouseup = function(){
                if(onTransition){
                    el.style.transform = 'none';
                    el.style.webkitFilter = 'blur(0px)';
                    el.style.opacity = '1';
                    onTransition = false;
                }
                mouseDown = false;
            };
            document.onmouseleave = function(){
                if(onTransition){
                    el.style.transform = 'none';
                    el.style.webkitFilter = 'blur(0px)';
                    el.style.opacity = '1';
                    onTransition = false;
                }
                mouseDown = false;
            };
        };
    };

	// Testing
	var lis = doc.getElementById('test').getElementsByTagName('li');
    [].forEach.call(lis,function(li){
    	li.onDiscard(function(el){
        	el.remove();
           ...