使用HR标签调整textarea的大小

Question

我正在尝试使用水平规则作为句柄创建一个可调整大小的textarea（类似于Stackoverflow编辑器）。

我正在尝试：

<div class="container">
    <textarea class='editor'></textarea>
</div>

和

(function ($) {
    $(function () {
        $(".editor")
            .wrap("<div class='resizable'></div>'")
            .parent()
            .append("<hr class='resizer ui-resizable-s'/>");    

        $(".resizable").resizable({
            handles: {
                s: $(".resizer").get()
            }
        });
    });
})(jQuery);

但这不起作用。实际上没有任何事情发生。

如何解决这个问题？

仅供参考，有一个JSfiddle可以重现这个问题。

Answer 1

好吧，如果我手动注入jQuery和jQueryUI，实际上我的代码正常工作。

可能是jsFiddle的错误。

更新的jsFiddle：updated

更确切地说，我的第一次尝试是使用jsfiddle添加jQuery和jQuery UI：

这不起作用。 Chrome控制台显示：

  

未捕获的TypeError：无法读取未定义的属性'safari'$ .widget._mouseDown @jquery-ui.js：648（匿名函数）@jquery-ui.js：582jQuery.event.dispatch @jquery-compat-git。 js：4894jQuery.event.add.elemData.handle @jquery-compat-git.js：4551 67jquery-ui.js：656

     

未捕获的TypeError：无法读取未定义的属性“msie”

但如果我手动包含这些资源：

• http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
• http://code.jquery.com/jquery-2.1.3.min.js
• http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

它按预期工作。