Question

我在可拖动的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>

Answer 1

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

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

Answer 2

您可以发送事件，例如：

-DEMO-

$(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable :input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});

Answer 3

您可以尝试将contenteditable属性添加到div：

<强> HTML

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

<强> JQuery的

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

<强> JSFiddle

Answer 4

真的很老问题，但我的解决方案略有不同，所以在这里回答。

通过在可拖动的初始化程序中设置cancel属性，禁用input元素的可拖动。我认为在大多数情况下这是一个小小的妥协。但是YMMV。

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

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

4 个答案:

-DEMO-