如何在jquery或javascript中创建拖放事件？

我想使用以下jquery插件创建图像，但我希望用户拖动并绘制一个创建，而不是单击ok按钮，那么我如何实现这一点呢？

---

有什么想法吗？

该插件似乎只允许您在创建插件实例时或通过插件中的编辑对话框添加注释

我创建了一个插件分支：使用一个名为

loadMore

的附加方法，可以通过编程方式向带有注释的图像添加更多注释

下面是处理在注释中拖动的代码，其中包含一些要尝试拖放的示例li元素。li元素中的文本将添加到注释中。如果li元素的类

可编辑

，则注释是可编辑的

$(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;
    }
});

---

这里有一个JSFIDLE实现了这一点：

你就是男人！！很抱歉花了这么长时间来欣赏，但你真的为我做了一个蛋糕散步…万分感谢！！！是否可以像绘制选择矩形一样绘制事件，以便我们可以像绘制选择区域一样绘制注释？？