使用jquery可拖动和可单击的输入元素_Jquery_Jquery Ui

使用jquery可拖动和可单击的输入元素

jquery jquery-ui

使用jquery可拖动和可单击的输入元素,jquery,jquery-ui,Jquery,Jquery Ui,我在可拖动的div中有一个输入元素。我的代码应该执行以下操作：当我拖动输入元素时，应该拖动整个可拖动的div。（已完成）当我点击输入元素时，我应该能够编辑文本。（无法完成）那么，有人能告诉我如何点击并编辑输入元素的文本吗这是我的完整代码： <!DOCTYPE html> <html> <head> <title>Draggable and Clickable Input</title>

我在可拖动的div中有一个输入元素。我的代码应该执行以下操作：

当我拖动输入元素时，应该拖动整个可拖动的div。（已完成）
当我点击输入元素时，我应该能够编辑文本。（无法完成）

那么，有人能告诉我如何点击并编辑输入元素的文本吗

这是我的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Draggable and Clickable Input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>
        <style>
            .draggable{height:500px;width:500px;background:blue;}
        </style>
    </head>
    <body>

        <div class="draggable" >
            <input type="text" value="drag me!"/>
        </div>

        <script>
            $('.draggable').draggable({
                cancel: ''
            });
        </script>

    </body>
</html>


可拖动和可单击的输入
.draggable{高度：500px；宽度：500px；背景：蓝色；}
$（'.draggable'）.draggable({
取消：“”
});

您可以调度事件，例如：

您可以尝试向div添加

contenteditable

属性：

HTML

<div contenteditable="true" class="draggable" >
    <input type="text" value="drag me!"/>
</div>

输入字段现在是可编辑的，您仍然可以从输入字段拖动整个div。

这是一个很老的问题，但我有一个稍微不同的解决方案，所以在这里回答

通过在可拖动初始值设定器中设置属性，禁用

input

元素的可拖动。我认为在大多数情况下，这只是一个小小的妥协。但是YMMV

$(".card").draggable({
     cancel: "input"
});

现在我可以编辑我的文本框，但我不能通过拖动文本框来拖动div。@Wolff，谢谢你的解决方案。你的解决方案达到了目的。但是，如果您能够改进解决方案并使其更简单，那就太好了。我注意到您的解决方案依赖于设置

cancel:null

，但我不知道这是做什么的。它似乎没有记录在API中。我需要使用

cancel

属性作为

draggable

（实际上是

sortable

）。这个解决方案对我不起作用。但除此之外，这似乎是一个聪明的技巧。

cancel

选项防止从指定元素开始拖动，并默认为

“input，textarea，button，select，option”

。因此，将其设置为空字符串

将使输入框等成为整体可拖动性的一部分，但它们需要按照上述解决方法进行特殊处理。请参阅此处的文档：

$(".draggable").draggable()
  .click(function() {
    $(this).draggable( {disabled: false});
}).dblclick(function() {
    $(this).draggable({ disabled: true });
});

$('.draggable input').click(function() {
    $(this).focus();
});

$(".card").draggable({
     cancel: "input"
});