使用 Jquery 的可拖动和可调整大小的文本区域 - 无法使用左键单击输入文本答案

【问题标题】：Draggable and resizable textarea using Jquery- cannot enter text using left click使用 Jquery 的可拖动和可调整大小的文本区域 - 无法使用左键单击输入文本
【发布时间】：2011-11-17 02:52:07
【问题描述】：

我正在尝试使用 Jquery 使文本区域可拖动和调整大小。我在 Is a draggable and resizable textbox/textarea possible using jQuery? 提到了 Stackoverflow 上的类似问题。

文本区域的 HTML

    <div id="text1" style="margin-left:100px; width:190px; height:50px; ">
    <form>
    <textarea id='ta1' style="width:180px; height:15px" class='property'>Right click to enter      text</textarea>
</form>
</div>

我可以通过在 div 中关闭它并使 div 可拖动来使 textarea 可拖动，并且我使文本区域可调整大小，如下所示：

   $( "#ta1" ).resizable( { cancel: '' } );
     $( "#text1" ).draggable( { cancel: '' } );
     $('#ta1').focus(function() {
     $(this).text('');
     });

唯一的问题是我无法通过正常的左键单击将文本输入文本区域。 在文本区域中输入文本的唯一方法是右键单击（我在右键单击时禁用了上下文菜单）。谁能解释为什么会这样？如何启用普通左键输入文本？

我的代码在这里 - http://jsbin.com/iboxoy/61/edit#javascript,html

谢谢，山

【问题讨论】：

呃...你为什么要写$(document)[0]...你意识到这只是打电话给document..所以写文件！在开始使用 jQuery 之前，您需要了解每次调用 $() 时它在做什么。否则，与刚刚学习正确的 js 相比，您最终将花费更多的时间来尝试解决此类疯狂的问题。
1.除了第 2 点之外。 $(document)[0] 是在右键单击时禁用上下文菜单（从这里开始 - web.enavu.com/daily-tip/…），因为之前的左键单击被劫持（如下所述）。 $(document) 本身并没有禁用上下文菜单。 3.我现在不需要使用它，因为左键点击文本框。谢谢。
1.这不是重点，它做得对。 2.我没有说使用$(document)，我说的是使用文档。如在 document.oncontextmenu 中。从 jQuery 对象中选择 [0] 只是 selecting the native DOM element 或在本例中为 document
在我让这匹马死去（以及你对它的整体表现）之前的最后一脚，该代码确实在执行； 1) 获取文档对象并用臃肿的 jquery 属性和函数库包装它。 2）从膨胀中拉出原生 DOM 元素，即文档。 3) 附加 oncontextmenu 处理程序....所以再一次，我的意思是你为什么必须在那里使用 jquery？它不是必需的。是的，它确实会影响页面的整体性能。 jsperf.com/jquery-bloated-mess 我知道这并没有太大区别..但是对于完全相同的代码..

标签： javascript jquery jquery-ui

【解决方案1】：

鼠标左键被可拖动插件劫持。如果你定义一个手柄来拖动你应该没问题。

【讨论】：

感谢 natedavisolds。该解决方案有效。我刚刚将拖动 jquery 代码更改为：$("#text1").draggable({cancel:'#ta1'});。这样，句柄仅围绕 div 而不是实际的文本框。在这种情况下，左键不会被劫持。