jQuery ui droppable在鼠标指针处的textarea中插入文本 [英] jquery ui droppable insert text in textarea at mouse pointer
问题描述
我正在尝试使用jquery ui draggable/droppable拖放到textarea中.我将textarea设置为可放置.我可以在发生放下时触发事件，但是我不知道如何准确确定放下"在文本区域中的哪个位置.
基本上，我想在放置拖放的textarea的精确位置插入文本.
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元素之一在文本区域中的哪个位置发生掉落"，然后如何在该区域的确切位置将字符串放入文本区域中? /p>
意思是，如果我将"Lolcat Shirt"拖到#mytext文本区域中并将其放在"random"和"text"之间，我希望#mytext textarea值更改为只是一些随机的Lolcat Shirt文本".
这可能吗?您的帮助将不胜感激.预先感谢！
在除IE之外的其他浏览器中，这并不是一件容易的事，因为您必须使用范围，而其他浏览器没有任何方法可以处理范围(您需要在此处放置文字).
但是以某种方式您尝试重新发明轮子.大多数浏览器(也许都是浏览器)都允许将选定的文本移动到文本区域，因此您需要做的是:onmousedown选择<li>的文本(而不是使其可拖动)
I am trying to drag and drop into a textarea using jquery ui draggable/droppable. I set the textarea as droppable. I am able to fire off events when the drop happens but I can't figure out how to determine exactly in which position in the textarea the 'drop' took place.
Basically I would like to insert text at the precise position in the textarea where the drop took place.
Google isn't helping me right now and it makes me sad.
Example:
<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>
So, in the above example, how do I find out which position in the textarea a 'drop' happened of one of the catalog li elements and then how do I put in a string into the textarea at that exact position?
Meaning, if I drag 'Lolcat Shirt' into the #mytext textarea and drop it between 'random' and 'text' I would like the #mytext textarea value to change to 'Just some random Lolcat Shirt text.'
Is this possible? Your help would be greatly appreciated. Thanks in advance!
This is not really easy in browsers except IE, because you have to work with ranges, and other browsers does'nt have any methods that work with coordinates inside a range(what you need, to place the text there).
But somehow you try to reinvent the wheel. Most browsers(maybe all) allow to move selected text into a textarea, so what you have to do is: onmousedown select the text of the <li> (instead of making it draggable)
这篇关于jQuery ui droppable在鼠标指针处的textarea中插入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
