3

OI 对带有文本区域的 jQuery 可拖动有一个简单的问题。

我必须将 textarea 插入到可拖动的 div 中，但 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
                    }
                })

我怎样才能使这个文本区域不可编辑，但在所有区域中都可以拖动和调整大小，而不仅仅是边界？

谢谢

4

3 回答 3

5

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

jQuery UI draggablescancel选项是一个 jQuery 选择器，它指定不能在其上启动拖动操作的元素。

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

因此，允许在可拖动对象内拖动 a 所需要做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"拖动） ，那么该cancel选项的正确值将是 jQuery 选择器#text。

于 2014-10-19T07:57:18.680 回答
1

演示

试试这个，只需在你的 textarea 添加一个 id 属性id="text"并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
                    }
                })

});

希望这有帮助，谢谢

于 2013-08-25T09:41:37.213 回答
0

你有没有尝试过 ：

<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 提供了可拖动属性。

于 2013-08-25T09:36:27.983 回答