jquery - 图像顶部的可缩放和可拖动标签

Question

如何在图像顶部创建可滚动和可拖动的标签，我应该能够在标签内键入内容，也应该能够通过单击“+ 添加标签”按钮添加更多标签。

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
    }

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