DND - SMART - MULTI DROP ZONE

by bizamajig

HTML

<div class="row">
    <div id="draggable1" class="draggable span3">
        <p>drag me</p>
    </div>
    <div id="draggable" class="draggable span3">
        <p>drag me</p>
    </div>
</div>
<hr>
<!-- Editeur : grille pour déposer -->
<div id="editor-container" class="">
    <div class="row droppable one">
        <div class="editable span3">blabla1</div>
    </div>
    <div class="row droppable two">
        <div class="editable span3">blabla2</div>
    </div>
</div>
<!-- editor-container -->

CSS

.span3 {
	    width:200px;
	}
	.droppable {
	    height:200px;
	    float:left;
	}
	.droppable:hover {
	    // background: red;
	}
	.draggable:hover {
	    background: olive;
	}
	.editable:hover {
	    background: cyan;
	}
	.ui-state-active {
	    background: red;
	}
	.span3 {
	    border-style:solid;
	    border-width:1px;
	}

JavaScript

var new_id = 20;

$(".draggable").draggable({
    cursor: 'move',
    revert: 'invalid',
    helper: 'clone',
    distance: 20
});

$(".droppable").droppable({
    hoverClass: 'ui-state-active',
    tolerance: 'pointer',
    accept: function (event, ui) {
        return true;
    },
    drop: function (event, ui) {
        //alert($(this).parent().html());
        //alert($(ui.helper).attr('class'));
        var obj;
        if ($(ui.helper).hasClass('draggable')) {
            //alert('draggable');
            if($(ui.draggable).parents("#editor-container").length > 0){
                $(ui.helper).clone().appendTo($(this)).removeAttr('style');
                $(ui.helper).remove();
            }else{
                obj = $(ui.helper).clone();
                obj.attr('id', (++new_id).toString());
                //obj.removeClass('draggable')
                obj.addClass('editable').removeAttr('style');
                //obj.addClass('droppable');
                $(this).append(obj);
            }

        }


        //alert($(this).parent().html());
    }
}).sortable({
    revert: false,
});