1

我需要通过单击、dblclick、mouseleave、mouseenter、可拖动功能将“绿色 DIV”动态添加到“容器”。

  1. Onclick一些绿色 DIV 我想在这个绿色 DIV 前面添加 MENU div（带有红色文本“我在这里”）。
  2. 双击时，我需要用 TEXTAREA 替换 DIV 并编辑文本。
  3. 模糊时 - 用 DIV 替换这个 textarea 并保存文本。

但是on blur有一些错误，因为有时 textarea 没有被 div 替换回来。

演示 - jsFiddle

HTML

<div id="add" style="background:yellow; width:100px;"> add new </div>
<div id="container"> </div>
<div id="menu" style="color:red;"><b> I'm here </b></div>
<br>

CSS

#container {
    width:500px;
    height:500px;
    background: palegoldenrod;
    position: relative;
    top:20px; 
    left: 100px;
    padding: 0px;
}
.add_to_this { 
    background:yellowgreen;
    position: absolute;
    display:inline-block;
    width:200px;
    height:30px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
}

jQuery

function handler1() {
    clearTimeout(time1);
    if ($(this).find("#menu").length) {
        return;
    }
    $('#menu').prependTo($(this));
    $("#menu").css({
        position: "absolute",
        left: "100px"
    }).show();
}

function handler2() {
    time1 = setTimeout(function() {
        $('#menu').appendTo('body').clearTimeout(time1);
    }, 5000);
}

function handler3() {
    clearTimeout(time1);
}

function handler4(){
    // DIV edit
    $('#edit_div').live({
        click: function() {
            if ($(this).children('textarea').length === 0) {
                $(this).html("<textarea class='inputbox' >"+$(this).text()+"</textarea>");
                $("textarea.inputbox").focus();
                $("textarea.inputbox").blur(function() {
                    var value = $(this).val();
                    $("#edit_div").text(value);
                });
            }
        }
    });
}


$("#add").on({
   click: function(e) {
        var timestamp = Date.now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posx + 'px; "><div id="edit_div">Click here</div></div>').click(handler1).mouseleave(handler2).mouseenter(handler3).dblclick(handler4).draggable({
                containment: "#container",
                scroll: false,
                cursor: 'lock',
                opacity: 0.55,
                grid: [2, 2]
            }).resizable();
        });
    }
});
4

0 回答 0