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

Qui*_*ver 3 jquery jquery-ui

我在可拖动的 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>
Run Code Online (Sandbox Code Playgroud)

mtl*_*mtl 5

$('.draggable input').click(function() {
    $(this).focus();
});
Run Code Online (Sandbox Code Playgroud)

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