javascript - 内部のテキストエリアからでもdivをドラッグ可能にする方法は?

Question

その中のテキストエリアからもドラッグできるドラッグ可能なdivを作ろうとしています。

html:

<div id="divContainer">
    <textarea id="text"></textarea>
</div>

CSS:

#divContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#text {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background-color: green;
}

jquery:

$("#divContainer").draggable();

div領域をクリックしてドラッグするとドラッグできますが、div領域をクリックしてもドラッグできませんtextarea。

これを解決する方法はありますか？

ここにjsFiddleがあります

Answer 1

この助けを願っています：

デモ

JQuery:

$(document).ready(function(){
$('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));
  $("#divContainer").draggable();
  $("#move").draggable({drag:function(event,ui){
  $('#text').css('top',$("#move").css('top')); 
  $('#text').css('left', $("#move").css('left'));
  },grid:[1,1],stop:function(){
  $('#move').css('top',$("#text").css('top'));

  $('#move').css('left', $("#text").css('left'));

  }});

});