Question

OI有一个简单的问题，jQuery可以拖放textarea。

我必须将一个textarea插入div draggable，但textarea的区域不可拖动，只有边框！我试图禁用textarea但没有。我想要一个textarea不可编辑但可拖动/可调整大小。

这是我的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;">Some text</textarea>
</div>

我的jQuery代码：

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

如何使这个文本区域不可编辑，但可以在所有区域中进行可拖动和可重新编辑，而不是边界到边缘？

由于

Answer 1

虽然接受的答案适用于这种特定情况，但推理完全是错误的。所以对于任何想要了解其工作原理的人来说：

jQuery UI draggables cancel选项是一个jQuery选择器，它指定不可以启动拖动操作的元素。

根据API，默认为input,textarea,button,select,option。

因此，允许拖动可拖动内的textarea所需的只是提供不包含cancel的任何textarea选项。

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

或

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

接受的答案设置id="text"上的textarea并设置cancel: "text"上的draggable。这实际上意味着可拖动<text></text>内的任何div元素将取消拖动操作，而拖动将适用于任何其他元素 - 包括textarea。在这种情况下，id属性完全不相关。

如果想要取消拖动（而不是启用拖动）对具有id="text"属性的特定元素，则{{1}的正确值选项是jQuery选择器cancel。

Answer 2

<强> DEMO

试试这个，只需在您的textarea id="text"中添加一个id属性，然后在cancel:"text,"

中添加一个属性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>

码

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

});

希望这有帮助，谢谢

Answer 3

你试过了吗？

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

由于您仅向div提供了可拖动属性，因此文本区域无法拖动。

jQuery textarea draggable

3 个答案:

HTML

码