jQuery - 添加可编辑和可拖动的元素

Question

我使用 jQuery 并使用 AJAX/JSON 调用后端系统以获取应列为小注释的元素列表，例如: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);
        });
    });
}

我有一个 HTML div 区域，应该在其中放置元素注释:

<div id="projectlist">

</div>

但我如何使用 jQuery 创建可编辑(打印在便条上的名称)和可拖动(仅在该元素列表区域中)的元素？ 如果我添加一个 CSS 类，Draggable 将起作用

class="draggable"

包含jQuery UI并设置

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

但首先，我必须渲染元素列表并做笔记...... 有谁知道并且可以帮助我吗？

提前致谢并致以最诚挚的问候。

Answer 1

我会将便签设为 div 元素的背景图像，然后使用您需要插入的文本(和 html)更新所述 div 元素的 html。

<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 - 像这样插入内容......

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

也许我没听懂...您对哪一步有疑问？