Question

我正在尝试（并且失败）将拖放机制实现到HTML textarea中。

使用jQuery或Scriptaculous（我们同时使用两者），拖放机制相对容易，所以我愿意接受使用这两者中的任何一个的答案。

问题是，我似乎无法找到一种方法来读取或设置插入点。

我最终希望能够做的是确定放置位置，进行某种数学计算以确定textarea的确切位置，然后设置插入位置（或插入点），并放置（插入）删除了那里的文字。

我可以处理计算，我只需要知道如何阅读和设置插入位置（这最终将成为我删除文本的插入点）。这甚至可能吗？

谢谢 -

Answer 1

我通过拼凑来自这里的几个片段和想法来解决这个问题。以下是我解决这个问题的方法：

我将我想要拖拽的每段文字都放入 span ，其中包含一个“ draggable_text ”
使用jquery（在文档就绪函数中）在每次mouseover / mouseout触发时自动选择/取消选择范围内的文本。

..这是代码：

$(document).ready (

    $('.draggable_text').mouseover(
        function () {
          selectNode(this);
        }
    );

    $('.draggable_text').mouseout(
        function () {
          clearSelection(this);
        }
    );

);

function selectNode (node) {
    var selection, range, doc, win;
    if ( (doc = node.ownerDocument) 
          && (win = doc.defaultView) 
          && typeof win.getSelection != 'undefined' 
          && typeof doc.createRange != 'undefined' 
          && (selection = window.getSelection()) 
          && typeof selection.removeAllRanges != 'undefined'
        ) {
        range = doc.createRange();
        range.selectNode(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ( document.body 
                && typeof document.body.createTextRange != 'undefined' 
                && (range = document.body.createTextRange()) ) {
        range.moveToElementText(node);
        range.select();
    }
}

function clearSelection () {
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

有趣的是，使用这种方法，没有特别的拖累和需要实现丢弃机制 - 当您将所选文本拖动到文本区域时，浏览器会自动假定您希望将其复制到那里。完善！

我在FF3，IE6和IE7（WinXP和Vista）上测试了这个。拖放图形在每个图形上略有不同，但都有效。

Answer 2

我建议首先阅读JS中的Range对象，请参阅http://www.quirksmode.org/dom/range_intro.html

Answer 3

既然你提到你正在使用jQuery，我建议你看一下FieldSelection插件。该插件将帮助您获取有关光标当前放置位置的信息。

为了设置光标位置，我使用以下功能：

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

您可以使用setCaretToPos这样的功能：

setCaretToPos(document.getElementById("textareaId"), 4);

在HTML TextArea中设置（或读取）Cursor / Caret的值

3 个答案: