Create div dynamically with options for the selected object

Question

I have a component that is draggable, and would enable the option to select when you show a little div on one corner, with some options (delete, new). Well, I'm trying to see some components some programming to do that, and unfortunately found nothing practical. There are some library but has a size gigange (versions with 112KB min.)

some of his friends, he would tell me somewhere or I can achieve something similar, or a component that makes it more optimized?

Thanks

Obs.: I am using jQuery and jQueryUI.

Answer 1

If you want to have a draggable window, jquery UI's dialog is the plugin for that. It has a button API that you can use to define your own buttons.

Answer 2

Anwser:

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