javascript - 使用 jQuery 第一次调整大小后，drop 和 resize 似乎不起作用

Question

开发者早上好:-)

如果我在第一次调整大小后将鼠标移开，我将无法再调整大小...而且，在第一次调整大小后，我也无法删除该 div...

我使用 Laravel 和 jQuery。

参见 the jsFiddle demo

我希望能够一次又一次地调整大小...

这里是 JS 代码(jsFiddle 会告诉你完整的代码):

$("#creneau"+i+"-"+j).droppable({
    appendTo: "body",
    tolerance: "pointer",
    accept: ".external-event",
    drop: function(event, ui) {
        var draggableEvent = null;
        if($(ui.draggable).hasClass("cloneable")){
            var drg = ui.draggable.clone();
            $(drg).addClass("moveable");
            $(drg).removeClass("cloneable");
            drg.resizable({
                handles: 'e, w',
                        resize: function(event, ui) {
                            $(this).empty();
                            $(this).append($(this).position().left);
                            $(this).append("<div style=\"z-index: 90; display: block;\" class=\"ui-resizable-handle ui-resizable-e\"></div>");
                            $(this).append("<div style=\"z-index: 90; display: block;\" class=\"ui-resizable-handle ui-resizable-w\"></div>");
                        }
            });
            drg.draggable({
                appendTo: "#hours-creneau",
                cursor: "move",
                helper: 'clone',
                revert: "invalid"
            });
            draggableEvent = $(ui.draggable);
        }else if($(ui.draggable).hasClass("moveable")){
            $(this).append($(ui.draggable));
            draggableEvent = $(ui.draggable);
        }
        $(this).append(drg);
    }
});

和 html :

        <div id='external-events'>

            <h4>Draggable States</h4>

                <span class='external-event cloneable'>State1</span>
                <span class='external-event cloneable'>State2</span>
                <span class='external-event cloneable'>State3</span>
                <span class='external-event cloneable'>State4</span>

        </div>
        <div id="tables-events">

            <div id="hours-creneau">
                <div id="hours"></div>
                <div id="creneau" class="draggable"></div>
            </div>
        </div>

非常感谢!

编辑:我自己回答

我还不能发布答案，但我会编辑这条消息:

首先，div 在调整大小时似乎添加了“顶部、左侧和绝对 css”。所以我删除了左侧和顶部:

$(this).css("top", "");
$(this).css("left", "");

并且在调整大小后再次放置。

对于在第一次调整大小后禁用的调整大小，这是因为我在 div 中附加了文本...不知道真正的原因，但它“破坏”了可调整大小的事件。

感谢大家的帮助。

Answer 1

我自己回答，我分享答案。

首先，div 在调整大小时似乎添加了“顶部、左侧和绝对 css”。所以我删除了左侧和顶部:

$(this).css("top", "");
$(this).css("left", "");

并且在调整大小后再次放置。

对于第一次调整大小后禁用的调整大小，这是因为我在 div 中附加了文本...不知道真正的原因，但它“破坏”了可调整大小的事件。

感谢大家的帮助。