Drag'n'drop images; save pointers

Generate toolbar from JSON dataset

HTML

<div class="toolbar"><span>Drag...</span></div>
<div class="canvas"></div>

CSS

/* prevent users from selecting text in draggable items */
[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.toolbar span {
    display:inline-block;
    float:left;
}
.toolbar img {
    margin: 10px;
}
.canvas {
    position:relative;
    height:550px;
    width:400px;
    background:Yellow url("http://www.mapstop.co.uk/images/uploaded/lrg_wg2668.6a40d0d.jpg") no-repeat;
}
.canvas img {
    position:absolute;
}

JavaScript

$(document).ready(function () {
    var $o, os;

    //generate toolbar
    var $toolbar = $(".toolbar");
    $.each(tools, function (i, tool) {
        $("<img>", tool).appendTo($toolbar);
    });


    //define drag and drop handlers
    $toolbar.on("dragstart", "img", onDrag);
        alert(JSON.stringify($toolbar, 4));
    $(".canvas").on({
        dragenter: false,
        dragover: false,
        drop: onDrop
    });

    //handle commencement of drag
    function onDrag(e) {
        $o = $(this).clone();
        var o = e.originalEvent;
        o.effectAllowed = "copy";
        os = { X: o.offsetX, Y: o.offsetY };
    }

    //handle drop
    function onDrop(e) {
        e.preventDefault();
        var o = e.originalEvent;
        var pos = { left: o.offsetX - os.X, top: o.offsetY - os.Y };
        $o.css(pos);
        $(this).append($o);
        //***DATABASE example:-
        // (1) Create dataset, e.g. JSON:-
        var data = {
            id: $o.data("id"),
            description: $o.data("description"),
            position: pos
        };
        // (2) Send (JSON) data to SQL webservice using AJAX POST:-   
        //$.post("sqlwebservice.ashx", data);
        return false;
    }
});

//define toolset (JSON, e.g. from database)...
var tools = [{
    "data-id": 1,
    alt: "sun",
    title: "sun",
    src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png",
    "data-description": "sun in photo"
}];