无法制作可调整大小/可拖动的<textarea> </textarea>

时间:2013-09-16 01:14:40

标签: jquery jquery-ui

我有一个jsfiddle here - 我正在尝试创建一个可拖动且可调整大小的textarea,但draggable()resizable()方法没有这样做。如果我只用<textarea>替换下面第九行中的<div>,那么它可以正常工作。

有谁知道问题是什么?

由于

 $(function () {
   $('#new').click(function () {
     var new_offset = {
       top: 30,
       left: 40
     };
     var new_width = 200;
     var new_height = 150;
     var newElement$ = $('<textarea>')
       .width(new_width)
       .height(new_height)
       .draggable()
       .resizable()
       .css({
         'position': 'absolute',
         'background-color': 'yellow',
         'border-color': 'black',
         'border-width': '1px',
         'border-style': 'solid'
       })
       .offset(new_offset)
       .appendTo('body');
   });
 });

1 个答案:

答案 0 :(得分:3)

这是一个允许拖动和文本编辑的解决方案。但是,您无法使用光标选择文本。你可以移动箭头键或cmd-A。

基本上,你在DIV中包围textarea,从textarea中删除resize,并使div可以调整大小和拖动。

这是你必须添加到draggable()函数的jQuery。

.draggable({
    cancel: "text",
    start: function (){
        $('#textarea').focus();
    },
    stop: function (){
        $('#textarea').focus();
    } 
})

JSFIDDLE