控制拖放的位置

Question

我有一个以文本开头的文本区域，我不希望用户能够进行更改，但以下内容阻止了这样做：

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

为了说明起见，它看起来像

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

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

Answer 1

我想出了一个解决方案。 它取决于jQuery，但是我确定熟练的JS程序员可以轻松删除该依赖项。

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

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

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

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

到目前为止，我注意到的最大缺点是破坏了用户选择全部+删除的功能。 编辑：我已经解决了这个缺点，现在可以选择全部并删除。

Answer 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;
}