使用所選對象的選項動態創建div

Question

我有一個可拖動的組件，並且可以啓用該選項，以便在某個角落顯示一個小div時使用某些選項（刪除，新建）進行選擇。那麼，我試圖看到一些組件編程來做到這一點，不幸的是沒有發現任何實際的東西。有一些圖書館，但有一個大小gigange（版本與112KB min。）

他的一些朋友，他會告訴我的地方，或者我可以實現類似的東西，或使它更優化的組件？

感謝

實驗值：我使用jQuery和jQueryUI的。

Answer 1

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

Answer 2

如果你想有一個可拖動的窗口，jQuery UI的dialog是插件。它有一個按鈕API，您可以使用它來定義您自己的按鈕。