可扩展的＆amp;图像顶部的可拖动标签

Question

如何创建可扩展的＆amp;在Image上面的可拖动标签，我应该能够键入内部标签，并且还应该能够通过单击＆＃34; + ADD LABEL＆＃34;来添加更多标签。按钮。

Answer 1

试试这个：http://jsfiddle.net/lotusgodkk/GCu2D/125/

这可能不完美但你可以继续努力。它只是您开始的基地。

JS：

$(document).ready(function () {
        handler();
        $('a').click(function () {
            var div = $('<div class="label" contenteditable="true">Part 1</div>');
            $('body').append(div);
            handler();
            return false;
        });
    });

    function handler(){
    $('.label').draggable({
            refreshPositions: true,
        })
            .click(function () {
            $(this).draggable({
                disabled: false
            });
        }).dblclick(function () {
            $(this).draggable({
                disabled: true
            });
        }).resizable({
            handles: "all",
        });   
    }

HTML：

    <a href="">+Add</a>        
    <img src="http://www.freedomscientific.com/images/resources/human_eye.jpg" class="img" />
    <div class="label" contenteditable="true">Part 1</div>
    <div class="label" contenteditable="true">Part 2</div>
    <div class="label" contenteditable="true">Part 3</div>
    <div class="label" contenteditable="true">Part 4</div>
    <div class="label" contenteditable="true">Part 5</div>
    <div class="label" contenteditable="true">Part 6</div>
    <div class="label" contenteditable="true">Part 7</div>

CSS：

    .label {
        border:1px solid red;
        display:inline-block;
    }
    a {
        position:fixed;
        top:10px;
        right:10px;
        padding:5px;
        background-color:green;
        color:white
    }

对于方形可调整大小的句柄，您可以相应地自定义css