Question

我有一个可拖动的组件，并且可以选择何时在一个角上显示一个小div，并选择一些选项（delete，new）。好吧，我正在尝试看一些组件来做一些编程，不幸的是没有发现任何实际问题。有一些库，但有一个大小gigange（最小版本为112KB）。

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

由于

Obs。：我正在使用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，您可以使用它来定义自己的按钮。

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

2 个答案: