圖片頂部的可縮放和拖動標籤

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 
    } 

對於方可調整大小的手柄，可以相應地定製你的CSS