jquery ui dropppable вставка текста в текстовое поле при указателе мыши
Я пытаюсь перетащить в текстовое поле, используя jquery ui draggable / droppable. Я установил текстовое поле как доступное для удаления. Я могу запускать события, когда происходит падение, но я не могу понять, как точно определить, в какой позиции в текстовой области произошло «падение».
В основном я хотел бы вставить текст в том месте в текстовой области, где произошло падение.
Google мне сейчас не помогает, и это меня огорчает.
Пример:
<html><head><title>Drag Drop Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#mytext" ).droppable({
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
console.log(ui.position);
// figure out where in the textarea this is
// drop in some string
}
});
});
</script>
</head>
</body>
<div id="products">
<div id="catalog">
<h3><a href="#">T-Shirts</a></h3>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
</div>
</div>
<textarea id="mytext" cols="60" rows="20">Just some random text.</textarea>
</body></html>
Итак, в приведенном выше примере как мне узнать, в какой позиции в текстовом поле произошло «падение» одного из элементов каталога li, а затем как мне вставить строку в текстовое поле в этом точном месте?
Это означает, что если я перетащу «Lolcat Shirt» 'в текстовое поле #mytext и поместите его между' random 'и' text '. Я бы хотел, чтобы значение #mytext textarea изменилось на' Просто какой-то случайный текст Lolcat Shirt. '
Возможно ли это? Ваша помощь будет принята с благодарностью. Заранее спасибо!