Can't make a resizable / draggable <textarea>

问题

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?

Thanks

 $(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:

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.

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

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

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

JSFIDDLE

来源：https://stackoverflow.com/questions/18819175/cant-make-a-resizable-draggable-textarea