SORTABLE + DROP AREA - CANCEL ON DROP - BIZAMAJIG USAGE

by bizamajig

HTML

<div id="Page" class="Page">
    <div class="Container">
        <div id="Items" class="Items">
            <div class='Item'>Item 1</div>
            <div class='Item'>Item 2</div>
            <div class='Item'>Item 3</div>
        </div>
        <a id="NewItem" class="NewItem">Click to Add Item </a>
        <div id="CopyItem" class="CopyItem">Drop to Copy Item </div>
    </div>
</div>

CSS

DIV.Page
{
    display: inline-block;
    padding: 0px;
    width: 600px;
    min-height: 400px;
    margin: auto;
    background-color: #FFF;
    border: 1px solid #999;
}

DIV.Container
{
    margin: 10px;
    border: 1px dashed #CCC;
}

A.NewItem
{
    display: block;
    margin: 5px;
    background-color: #FFF;
    text-align: center;
    padding: 25px;
    color: #AAA;
    cursor: pointer;
}

A.NewItem:hover
{
    background-color: #E6FFE6;
    color: #555;
}

DIV.CopyItem
{
    display: none;
    margin: 5px;
    background-color: #FFF;
    text-align: center;
    padding: 25px;
    color: #AAA;
    cursor: pointer;
}

DIV.CopyItemActive
{
    background-color:#CCF8FF;
    color:#555;
}

DIV.Item
{
    margin: 5px;
    height: 80px;
    border:1px solid #CCC;
    background-color: #FCFCFC;
}

DIV.ItemPlaceHolder
{
    margin: 5px;
    height: 80px;
    background-color: #FFF4D9;
}

JavaScript

var itemCount = 3;
var awaitingCopy = false;

$(init);

function init() {
    $("#Items").sortable({
        revert: true,
        placeholder: "ItemPlaceHolder",
        opacity: 0.6,
        start: StartDrag,
        stop: StopDrag
    });

    $("#CopyItem").droppable({
        hoverClass: "CopyItemActive",
        drop: function(event, ui) {
            awaitingCopy = true;
        }
    });

    $("#NewItem").click(function(e) {
        e.preventDefault();
        itemCount++;
        var element = $("<div class='Item'>Item " + itemCount + "</div>");
        $("#Items").append(element);
        element.hide().slideDown(500);
    });
}

function CopyItem(element) {
    awaitingCopy = false;
    var clone = element.clone();
    $("#Items").append(clone);
    clone.hide().slideDown(500);
}

function StartDrag() {
    $("#NewItem").hide();
    $("#CopyItem").show();
}

function StopDrag(event, ui) {
    if (awaitingCopy) {
//    $(this).sortable('cancel');
			$("#Items").sortable('cancel');
      CopyItem($(ui.item));
    }
    $("#NewItem").show();
    $("#CopyItem").hide();
}