控制拖放的位置答案

【问题标题】：Controlling Position of Drag and Drop控制拖放的位置
【发布时间】：2011-11-05 03:53:20
【问题描述】：

我有一个以我不希望用户能够更改的文本开头的文本区域，并且通过以下方式阻止这样做：

左键和退格键一直有效，直到到达不可删除文本的位置。
向上键具有特殊功能，不用于导航目的（返回 false）。
- （使用前两条规则，用户不能通过箭头键将插入符号放置在该区域）
当用户单击元素时，插入符号会放置在文本区域的末尾（鼠标按下时）。
Home 和 ctrl+a 也处理好了。

为了说明，它看起来像

Don't Delete Anything Before the Colon:  Your text here.  The user text will also
wrap like this.

据我所知，我涵盖了所有情况，但只有一种情况：拖放。我知道如何完全禁用拖放，但这不是我想要的。我只是不希望“不可删除的文本”能够被更改。我可以在允许放置之前放置插入符号吗？或者，我可以阻止放置但访问放置事件并将其放置在我想要的位置吗？

【问题讨论】：

为什么文本必须在textarea中？只需将它放在文本区域旁边的一个跨度，让您的生活更简单。关于你的问题，我不确定，但我不认为你可以设置插入符号位置 ondragover
我原本打算尝试类似的方法，但希望文本能够在“不可删除的文本”下换行。我开始使用文本输入字段并为每个新行添加一个，但它变得很难看。

标签： javascript event-handling drag-and-drop

【解决方案1】：

我想出了一个解决方案。它依赖于 jQuery，但我敢肯定，一个熟练的 JS 程序员可以轻松移除这种依赖关系。

现场演示：http://trafnar.github.com/permastring/

JS代码：https://github.com/trafnar/permastring/blob/master/permastring.js

Github 回购：https://github.com/trafnar/permastring

它的工作原理是不断存储文本字段的值，然后基本上“撤消”任何改变永久字符串的更改。

到目前为止，我注意到的最大缺点是它破坏了用户执行全选 + 删除的能力。编辑：我已经修复了这个缺点，现在可以全选并删除。

【讨论】：

所以想法是让 drop 发生，但是检查永久字符串是否已被修改，如果是，则将其更改回来？这不是一个糟糕的计划，但让我再提出一个规定（我知道，他们正在堆积）。我希望这对用户来说是无缝的，而不是掉到不应该的地方，然后转移到适当的位置。
很好，唯一的问题是我仍然想要数据；只是不在我的永久字符串的中间。感谢您的努力。

【解决方案2】：

我想通了，这是要点：

为避免混淆，我首先“隐藏”了插入符号 OnDragOver 和 OnDragEnter。

function(event){
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

然后我阻止了 OnDrop，但将数据放在了我想要的位置。

function(event){
  element.value += event.dataTransfer.getData("Text");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

【讨论】：