textarea в draggable div без jqueryui

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