jQuery文本框可拖动

Question

我遇到了一个关于jQuery拖曳文本框的简单问题。

我需要将一个文本框插入到可拖曳的div中，但是文本框的区域不能被拖曳，只有边框可以！我尝试禁用文本框，但没有效果。 我希望文本框不可编辑，但可以拖曳/改变大小。

以下是我的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
                    }
                })

如何使此文本区域不可编辑，但可在所有区域内拖动和调整大小，而不仅限于边框？

谢谢

- Alessandro Minoccheri

Answer 1

尽管被接受的答案对于特定情况有效，但其推理是错误的。因此，对于任何想要了解其工作原理的人：

jQuery UI可拖动组件的 cancel 选项是一个jQuery选择器，用于指定不应该在其中启动拖动操作的元素。

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

因此，只需提供任何不包括textarea的cancel选项，即可允许在可拖动元素内部拖动textarea。

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

或者

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

被接受的答案在textarea上设置了id="text"，并在draggable上设置了cancel: "text"。这实际上意味着可拖动

内的任何<text></text>元素都将取消拖动操作，而拖动将在任何其他元素上有效，包括textarea。在这种情况下，id属性完全无关紧要。

如果想要在具有id="text"属性的特定元素上取消拖动（而不是启用拖动），那么cancel选项的正确值应该是jQuery选择器#text。

- Mikk3lRo

---

我也正想问这个问题 - 但重要的信息是，“取消”有一些默认值设置。 - B M

Answer 2

演示

试试这个，只需在您的文本区域中添加一个id属性id="text"，并在您的draggable()中添加一个属性cancel:"text,"

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

});

希望这能有所帮助，谢谢。

- SarathSprakash

---

我无法将div分配给textarea，因为它每次都是动态创建的，但似乎没有id也可以正常工作。 - Alessandro Minoccheri

如果您无法将“id”添加到其中，请将属性设置为cancel：“”，希望这可以帮助您。 - SarathSprakash

指定取消：" "，就足够了。 - SarathSprakash

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 元素可拖动的属性。

- Roy M J

---

我必须使div可拖动，因为在一个容器中有许多div，我无法直接将可拖动属性分配给文本区域。 - Alessandro Minoccheri

好的，所以您需要将div和文本区域一起拖动吗？但是div中除了文本区域还有其他HTML内容吗？ - Roy M J