无法设置可调整大小/可拖动的< textarea> [英] Can't make a resizable / draggable <textarea>

问题描述

我有一个jsfiddle 此处-我正在尝试创建一个文本区域可拖动和可调整大小，但是draggable()和resizable()方法没有做到这一点.如果我只是将下面第九行中的<textarea>替换为<div>，则可以正常工作.

I have a jsfiddle here - where I'm trying to create a textarea that is both draggable and resizable, but the draggable() and resizable() methods aren't doing it. If I just replace <textarea> in the ninth line below with <div> it works fine.

有人知道是什么问题吗?

Does anyone know what the problem is?

谢谢

 $(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');
   });
 });

推荐答案

此处是一种允许拖动和文本编辑的解决方案.但是，您不能使用光标来选择文本.您可以按Shift键或cmd-A键.

Here is a solution that will allow dragging and text editing. However, you cannot use your cursor to select text. You can shift-arrow key or cmd-A though.

基本上，您将文本区域包围在DIV中，从文本区域中删除调整大小，并使div可调整大小和可拖动.

Essentially, you surround the textarea in a DIV, remove resize from textarea, and make the div resizable and draggable.

这是必须添加到draggable()函数中的jQuery.

Here is the jQuery you must add to the draggable() function.

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

JSFIDDLE

这篇关于无法设置可调整大小/可拖动的< textarea>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！