jQuery - add editable and draggable elements

I use jQuery and I call a backend system with AJAX / JSON to get a list of projects which should be listed as small notes, like this one: http://www.psdgraphics.com/wp-content/uploads/2009/04/sticky-notes.jpg

function getAllProjects() {
    $.getJSON("allprocets, function(data) {
        $.each(data, function(id, data) {
            alert(data.id);
            alert(data.name);
        });
    });
}

and I have a HTML div area in which the project notes should be placed:

<div id="projectlist">

</div>

But how can I create with jQuery such elements which are editable (the name which is printed on the note) and draggable (only in this projectlist area)? Draggable will work, if I add for example a CSS class

class="draggable"

include jQuery UI and set

$(".draggable").draggable();

But first, I have to render the project list and make notes... Does anyone know and can help me?

Thank you in advance & Best Rega开发者_运维问答rds.

I would make the sticky note the background image of a div element, then update the html of said div element with the text (and html) you need inserted.

<div id="projectlist">
    <div class="project" style="width: 200px; height: 200px; background-image: url('sticky-notes.jpg'); background-repeat: no-repeat;">
        // text
    </div>
</div>

jQuery - Insert content like so...

function insert_content() {
    $('.project').html('<h1>Heading</h1><ul><li>Step 1</li><li>Step 2</li></ul><p>Project description</p>');
    }

Maybe I'm not getting it... Which step are you having a problem with?