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

我在可拖动的div中有一个输入元素。 我的代码应该做以下事情：

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

那么，有人可以告诉我如何单击和编辑可拖动的输入元素的文本吗？

这是我的完整代码：

        .draggable{height:500px;width:500px;background:blue;}    
  
  $('.draggable').draggable({ cancel: '' });    

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

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