Question

我想使用以下jquery插件http://flipbit.co.uk/jquery-image-annotation.html来分配图像，但我希望用户拖动并绘制anotation而不是单击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/

如何在jquery或javascript中创建拖动和绘制事件？

1 个答案: