How can I create a drag and draw event in jquery or javascript?

Question

I want to anotate images using the following jquery plugin http://flipbit.co.uk/jquery-image-annotation.html but I want the user to drag and draw an anotation instead of clicking on ok button so how can i achieve this? any ideas?

Answer 1

The plugin appears to only allow you to add notes when creating an instance of the plugin, or via the edit dialog in the plugin.

I created a fork of the plugin: https://github.com/mccannf/jquery-image-annotate with an additional method called loadMore which allows you to programmatically add more notes to an image with annotations.

Below is the code to handle dragging in annotations with some sample li elements to try dragging and dropping. The text in the li element is added to the annotation. If the li element has class editable then the annotation is 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;
    }
});

Here is a jsfiddle that implements this: http://jsfiddle.net/mccannf/Tsrku/17/