Вопросы Теги

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. '

Возможно ли это? Ваша помощь будет принята с благодарностью. Заранее спасибо!

5
задан Bubba Raskin 9 November 2010 в 08:41
поделиться