jquery - 使用所选对象的选项动态创建 div

Question

我有一个可拖动的组件，当您在一个 Angular 上显示一个小 div 时，它会启用选择选项，并提供一些选项(删除、新建)。好吧，我正在尝试查看一些组件和一些编程来做到这一点，但不幸的是没有找到任何实用的东西。有一些库，但有一个巨大的大小(最小 112KB 的版本)

他的一些 friend ，他会告诉我某个地方或者我可以实现类似的东西，或者让它更优化的组件？

谢谢

观察:我正在使用 jQuery 和 jQueryUI。

Answer 1

回答:

    $("#snaptarget").droppable({
    accept: '#snaptarget > img, #divPrompt > img',
    drop: function(event, ui) {
        var id   = ui.draggable.attr('id'); 
        var top  = ui.draggable.css('top');
        var src  = ui.draggable.attr('src');
        var left = ui.draggable.css('left');

        ui.draggable.remove();

        $('#snaptarget').prepend('<img id="' + id + '" name="dropped" src="' + src + '" style="position:absolute;" onmouseover="javascript:showDiv(this);" onmouseout="javascript:setTimeout(function(){ removeDiv(' + id + '); },200);"/>');
        $('#' + id).css({ "top" : top, "left" : left });
        $('#' + id).draggable({ snap: true, revert: 'invalid', cursor: 'move', containment: 'document', scroll: false,
                                    drag: function() {
                                        $("div [name='divOptions']").remove();
                                    },
                              });
    }
});

showDiv = function(objCurrent){
    var IdParent = $(objCurrent).closest("div").attr("id");
    if ($.trim(IdParent) == "snaptarget"){
        var Id        = $(objCurrent).attr("id");
        var leftPos   = $(objCurrent).css("left");
        var bottomPos = parseInt($(objCurrent).css("bottom")) - 20 + "px";

        $('#snaptarget').prepend(
                                '<div id="divOpc' + Id + '" name="divOptions" onmouseover="javascript:bolOverride=true;">' +
                                    '<div id="divMenu' + Id + '" name="divMenuInsert" onmouseover="javascript:bolOverride=true;">' +
                                        '<img src="images/BotaoAdicionar.png" width="12" height="12" alt="Adicionar Roda Simples" onclick="addRodaSimples();" onmouseover="javascript:bolOverride=true;" onmouseout="javascript:bolOverride=false;removeDiv('+ Id + ');"/>' +
                                    '</div>' +
                                '</div>'
                                );

        $('#divOpc' + Id).css({"left" : leftPos, "bottom" : bottomPos, "width" : "10px", "height" : "10px", "border-color" : "#F0F", "position" : "absolute" });
    }
}

removeDiv = function(objCurrent){
    var IdParent = $(objCurrent).closest("div").attr("id");
    if (($.trim(IdParent) == "snaptarget")&&(bolOverride==false)){
        $("#divOpc" + $(objCurrent).attr('id')).remove();
    }
}