分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery ui droppable在鼠标指针的textarea中插入文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试使用 jquery ui draggable / droppable拖放到textarea中.我将textarea设置为droppable.我可以在丢弃发生时触发事件,但我无法弄清楚如何准确确定textarea中“drop”发生在哪个位置.

基本上我想在文本区域的精确位置插入文本.

谷歌现在没有帮助我,这让我感到难过.

例：

<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"
    });

    $( "#@R_874_11174@ext" ).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="@R_874_11174@ext" cols="60" rows="20">Just some random text.</textarea>

</body></html>