textarea在可拖動的div沒有jqueryui

Question

我有一個可拖動div的textarea的問題，我不能使用鼠標來編輯文本，我必須使用箭頭......如何處理這個？

$.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和鼠標離開textarea的事件。

$('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(); 
}); 

​​