个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 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 textarea中并将其放在“random”和“text”之间，我希望#mytext textarea值更改为“Just some random Lolcat Shirt text”。
这可能吗？我们将非常感谢您的帮助。提前致谢!
最佳答案
这在除 IE 之外的浏览器中并不容易，因为您必须使用范围，而其他浏览器没有任何处理范围内坐标的方法(您需要将文本放置在那里)。
但不知何故，你试图重新发明轮子。大多数浏览器(也许是所有浏览器)允许将选定的文本移动到文本区域中，因此您需要做的是: onmousedown 选择 <li> 的文本(而不是使其可拖动)
关于jquery ui droppable 在鼠标指针处的文本区域中插入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4131808/
25
4
0
这个问题已经有答案了: What is the difference between a variable, object, and reference? [duplicate] (5 个回答) 已关
我正在使用以下代码来学习java套接字编程。它的作用是，client.java 程序从用户那里获取一个号码并将其发送到 sever.java。然后服务器将其乘以2并发回给客户端。在我的客户端程序中，它
我编写了一个自己开发的串行端口类，为了简单起见，我使用了阻塞/同步/非重叠。我浏览了所有 MSDN 文档，这对我来说很困难。 我在从端口打开、传输或接收字节方面没有任何问题。所有操作都是同步并且没有线
//Not finished -- disregard function evaluate() { var cdate = new Date(); var cday = cdate.getDa
我已经尝试过了，但它有效 例如: x= 523.897 y= x[0:"."] print y 我只想打印 523。如何让 Python 抓取字符串直到某个字母或数字？ 最佳答案 行 y = x[0:
我想移动拐 Angular 处的方框(从左上角开始水平移动 Angular 落到右上角然后你去到右下角。 function myMove() { var elem = document.getEl
如何让侧边栏停止在第二个侧边栏部分而不是顶部？ fiddle http://jsfiddle.net/EvAdP/2/ HTML I'm the header
我刚刚在大学开始我的第二门编程类(class)，我们的第一个作业相当简单，旨在基本上检查我们的环境并检查我们是否知道如何通过类(class)网站提交作业。 当我运行我们提供的代码时，它卡在应该提示用户
我目前正忙于我的这个信息学元素(构建一个示例交友网站)。问题是我在把所有东西都放在正确的地方时遇到了一些麻烦。一切都很顺利，直到我的邮箱出现在错误的位置(但是，Dreamweaver 会按照我的意
我想，和你一样hover a GIF shot on Dribbble , 当光标位于元素高度顶部之后/50% 处时显示带有信息的 div。 测试示例 我做了这个，这是有效的，但有点棘手......特
我有一个下拉菜单，并且我已将 mouseenter 设置为选项。因此，如果鼠标位于触发器之外，菜单应该关闭。我正在使用 jQuery 1.8.0。这可能是 CSS 问题吗？ 这是我初始化插件的代码。
我正在尝试在 Visual Basic for Applications 中编写一个 hello world 应用程序，即修改 Excel 工作表中的单元格。这是: Sub hello() D
我的应用程序使用 JSF 2.1 和 PrimeFaces。最近，由于一些线程卡住，观察到 CPU 利用率非常高。所有卡住线程的卡住线程转储都指向 javax.faces.component.UICo
在列出 aws cognito 用户时，我的 Node js 应用程序遇到问题。 仅当我有超过 60 个 Cognito 用户时才会出现此问题。 Reference of API 下面是我的代码片段。
我是 ubuntu 用户..我在 php 中有一个执行 python 文件的命令..python 文件设置为可执行文件..所以，我的 php 命令是:- shell_exec("try.py");
我正在尝试将剪贴板内容写入文件，但由于某种原因程序卡住了。 FILE *fp; fp = fopen("tmp.code","w"); fprintf(fp,getclip()); /*writes*
当用户向下滚动时，我使用此代码使侧边栏固定在某个 div 处。问题是我必须手动输入一个阈值数字，这并不总是理想的，因为该部分的位置可能会更改或在各种浏览器和系统之间不一致。我想知道是否有一种方法可以在
我有一个字符串数组，例如 first_page = {{"U","M","Y","Q","I","A","L","D","P"、"F"、"E"、"G"、"T"、"Z"、"V"、"W"、"H"、"O"、
我能否在页面上的特定 px 位置放置一个元素(例如图像)，然后让文本围绕它流动？ 必要时使用 JS/jquery。 我确实看到了这个Have text flow around an object th
第一次在这里提问。 我有两个简单的 Javascript 函数，1. 生成一个随机字母，2. 在每个单元格中使用单个字母填充 10x10 表格。创建表的主要函数是通过带有 onclick 的简单 HT
我是一名优秀的程序员,十分优秀！