drag drop trash

by nilesh026

HTML

<div class="holder" id="holder">
       <div class="draggable">bread</div>  
       <div class="draggable">milk</div>  
       <div class="draggable file">Drop</div>  
       <div class="draggable file">oranges</div>  
       <div class="draggable">bread</div>
       <div class="draggable">milk</div>  
    </div>
    <a class="trash empty">
       <div id="trash-can" class="sortable"></div>
    </a>

CSS

.holder { float: left; border: 1px solid #000; width: 150px;position:relative }
        #trash-can { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }

        .img-float { float: right; }
        .clear-both { clear:both; }
        .droppable { float: left; width: 150px; height: 150px; padding: 0.5em; }
        .draggable { width: 100px; height: 50px; padding: 0.5em; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px solid #000;float:left }

        .sortable { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }
.file{ border: 1px dotted red;}

JavaScript

var holder = document.getElementById('holder'),
    tests = {
      filereader: typeof FileReader != 'undefined',
      dnd: 'draggable' in document.createElement('span'),
      formdata: !!window.FormData,
      progress: "upload" in new XMLHttpRequest
    }, 
    support = {
      filereader: document.getElementById('filereader'),
      formdata: document.getElementById('formdata'),
      progress: document.getElementById('progress')
    };
      
    if (tests.dnd) {
	  holder.ondragover = function () { this.className = 'hover'; return false; };
  	  holder.ondragend = function () { this.className = ''; return false; };
	  holder.ondrop = function (e) {
		console.log(e)
		if (e.stopPropagation) e.stopPropagation();
		this.className = 'holder';
		e.preventDefault();
		readfiles(e.dataTransfer.files);
	    };
    }

$(document).ready(function(){
    
    $( ".holder" ).sortable({
		revert: 100,
		scrollSensitivity: 100,
		distance: 10,
		scrollSpeed: 400,
		//containment: "#holder",
			update: function(event, ui) {
            var basketItems = $(this).sortable('toArray').toString();
        }
	});
	
	
	$("#trash-can").droppable({
		hoverClass: "droppable-hover",
		drop: function(event, ui) {
			var element = ui.draggable.css('position', '');
			$(ui.draggable).fadeOut(100);
		}
	});
	
	$(".draggable").draggable({
        connectToSortable: ".holder",
        revert: '100'
    });
    
 $.ajax({
        type: "post",
        url: "/echo/html/",
        data: {
            html: ' <div class="draggable">bread</div><div class="draggable">milk</div><div class="draggable file">cheese</div><div class="draggable file">oranges</div><div class="draggable">bread</div><div class="draggable">milk</div>'
        },
        success: function (data) {
            $("#holder").html(data);
            $(".file").droppable({
					hoverClass: "droppable-hover",
					drop: function(event, ui) {
						console.log(event)
                        //insed of fileread call...