没有 jqueryui 的可拖动文本区域 div

Question

我在可拖动的文本区域中遇到问题 div，我无法使用鼠标编辑文本，我必须使用箭头...如何处理？

  $.event.props.push('dataTransfer');

  $('div').on("drag", function (event) {
      event.preventDefault();
  });

  $('div').on("dragstart", function (event) {
      // store a ref. on the dragged elem
      event.dataTransfer.setData('text/plain', null); //moz
      dragged = event.target;
  });

  $('textarea').on("click", function (e) {
      e.preventDefault();
  })

div {
    width:200px;
    height:200px;
    border:1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div draggable="true">
    <textarea>Hello</textarea>
</div>

http://jsfiddle.net/1oe43zdL/

Answer 1

您可以根据文本区域的 mouseenter 和 mouseleave 事件切换拖动功能。

$('textarea').on("mouseenter", function (e) {
      draggable = false;
      $(e.target).parent().attr('draggable', false);
      e.preventDefault();
});

$('textarea').on("mouseleave", function (e) {
      $(e.target).parent().attr('draggable', true);
      e.preventDefault();
});

jsfiddle update

没有 jqueryui 的可拖动文本区域 div

textarea in draggable div without jqueryui

jquery

textarea

draggable