jQuery textarea draggable

Question

OI have a simple problem with jQuery draggable with a textarea.

I have to insert a textarea into a div draggable but the area of textarea isn't draggable, only border! I have tried to disable textarea but nothing. I would like to have a textarea NOT editable but draggable / resizable.

This is my html code:

<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
     <textarea disabled style=" width:98px; height:48px;">Some text</textarea>
</div>

My jQuery code:

                $('.drag-item').draggable({
                    snap        : true,
                    cursor      : "move",
                    delay       : 100,
                    scroll      : false,
                    containment : "parent",
                    stop: function (e, ui){
                       //some code
                    },
                    drag: function(e, ui){
                       //some code
                    }
                }).resizable({
                    containment : "parent",
                    stop: function(e, ui) {
                        var width = ui.size.width;
                        var height = ui.size.height;
                        var hereDrag = this;

                        if($(hereDrag).find('textarea').length > 0){
                            $(hereDrag).find('textarea').css('width', width - 10);
                            $(hereDrag).find('textarea').css('height', height - 10);
                        }
                    },
                    resize: function(e, ui){
                       //some code
                    }
                })

How can I make this textarea not editable but draggable and resiazable in all the area e not onyl to the border?

Thanks

Answer 1

While the accepted answer works for this specific situation the reasoning is simply wrong. So for anyone wanting to understand how this works:

The jQuery UI draggables cancel option is a jQuery selector, which specifies elements on which it should not be possible to start a drag operation.

According to the API it defaults to input,textarea,button,select,option.

So all that is needed to allow dragging on a textarea inside the draggable is to supply any cancel option that does not include textarea.

$('.drag-item').draggable({cancel: ''});

or

$('.drag-item').draggable({cancel: 'input,button,select,option,.undraggable'});

The accepted answer sets id="text" on the textarea and sets cancel: "text" on the draggable. What this really means is that any <text></text> element inside the draggable div will cancel the drag operation, while dragging will work on any other element - including the textarea. The id attribute is entirely irrelevant in this case.

If one wanted to cancel dragging (not enable dragging) on a specific element with an id="text" attribute, then the correct value for the cancel option would be the jQuery selector #text.

Answer 2

DEMO

Try this, just add an id attribute to your textarea id="text" and add an attribute cancel:"text," in your draggable()

html

<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
     <textarea disabled style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>

code

$(function () {
    $('.drag-item').draggable({
                    snap        : true,
                    cursor      : "move",
                    delay       : 100,
                    scroll      : false,
                    cancel: "text",
                    containment : "parent",
                   drag: function(e, ui){
                       //some code
                    }
                }).resizable({
                    containment : "parent",
                    stop: function(e, ui) {
                        var width = ui.size.width;
                        var height = ui.size.height;
                        var hereDrag = this;

                        if($(hereDrag).find('textarea').length > 0){
                            $(hereDrag).find('textarea').css('width', width - 10);
                            $(hereDrag).find('textarea').css('height', height - 10);
                        }
                    },
                    resize: function(e, ui){
                       //some code
                    }
                })

});

Hope this helps,thank you