如何在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/