如何在jquery或javascript中創建拖動和繪製事件？

Question

我想使用以下jquery插件http://flipbit.co.uk/jquery-image-annotation.html對圖像進行排版，但我希望用戶拖動並繪製一個斜槓而不是單擊OK按鈕，那麼我如何實現這一點？ 有什麼想法？

Answer 1

該插件似乎只允許您在創建插件實例時或通過插件中的編輯對話框添加註釋。

我創建了一個插件的分支：https://github.com/mccannf/jquery-image-annotate和另外一個叫做loadMore的方法，它允許您以編程方式向註釋圖像添加更多註釋。

下面是處理註釋時使用一些示例li元素拖動以拖放的代碼。 li元素中的文本被添加到註釋中。如果li元素具有類editable，則註釋是可編輯的。

$(document).ready(function(){ 

    // Used to set unique ids for each annotation 
    var uniqueId = 100001; 

    var annotatedImage = $("#trafalgar").annotateImage({ 
      editable: true, 
      useAjax: false 
     }); 

    $("#label1").draggable({ revert: true, cursor: "crosshair" }); 
    $("#label2").draggable({ revert: true, cursor: "crosshair" }); 
    $("#label3").draggable({ revert: true, cursor: "crosshair" }); 
    $("#label4").draggable({ revert: true, cursor: "crosshair" }); 

    $(".image-annotate-view").droppable({ 
        tolerance: "pointer", 
        hoverClass: "drop-hover", 
        drop: function(e, ui) { 
         alert("Dropped!"); 
         var newPosX = ui.offset.left - $(this).offset().left; 
     var newPosY = ui.offset.top - $(this).offset().top; 
         var note = createNote($(ui.draggable).text(), newPosY, newPosX, $(ui.draggable).hasClass("editable")); 
         $.fn.annotateImage.loadMore(annotatedImage, note); 
      } 
    }); 

    // Creates a note to be added to the image 
    // Width and height are static, but could also be passed in as a configuration 
    function createNote(noteText, dropTop, dropLeft, editFlag) { 
     var thisNote = new Object(); 
     thisNote.id = (uniqueId++).toString(); 
     thisNote.text = noteText; 
     thisNote.top = dropTop; 
     thisNote.left = dropLeft; 
     thisNote.width = 30; 
     thisNote.height = 30; 
     thisNote.editable = editFlag; 
     return thisNote; 
    } 
}); 

這裏是實現這個的jsfiddle：http://jsfiddle.net/mccannf/Tsrku/17/