如何将元素文本拖放到文本框中的特定位置？

rggaifut 于 2022-10-24 发布在 Angular

关注(0)|答案(1)|浏览(173)

我正在工作的项目，这需要与树视图中的文本的HTML元素被拖放到文本框。将元素拖放到文本框中后，只应将该元素的innerText粘贴到文本框的特定位置。我在这个项目中使用AnularJS。
我正在收听MUSSEDOW、MICOSEMOVE和MUSEUP事件。我的想法是将HTML元素的innerText复制到剪贴板上，并在‘MouseDown’事件上复制AngularJS模型，然后将其粘贴到‘MouseUp’上的文本区域中。
示例代码

$scope.elementValue;

        elementsWithValuesToCopy.addEventListener('mousedown',
            function(event) {
                var element = event.currentTarget;
                var range = document.createRange();
                range.selectNode(element);
                window.getSelection().addRange(range);
                $scope.elementValue = document.execCommand('copy');
            });

        textAreaElement.addEventListener("mouseup",
            function(event) {
                ////Pasting value of elementValue into text box
            });

上面的代码在我的项目中不起作用，值没有被分配给模型。

angularjs

来源：https://stackoverflow.com/questions/42187268/how-to-drag-and-drop-element-text-into-specific-place-in-the-textbox

1条答案

按热度按时间

ycl3bljg1#

因此，5年后，我在搜索类似功能的快速片段时，发现了这个问题。由于没有答案，我转而使用MDN文档，并找到了一个非常简单的解决方案。所以我想和大家分享一下。
我们只需要设置数据并将MIME更正为在拖放事件之间共享的dataTransfer对象：

el.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.textContent); // for <textarea>
  e.dataTransfer.setData('text/html', e.target.outerHTML); // for [contenteditable]
});

document.querySelector('span.drag-me').addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.textContent);
  e.dataTransfer.setData('text/html', e.target.outerHTML);
});

span.drag-me {
  background: #ffc600;
}

.editor {
  margin-top: 1em;
  width: 400px;
  height: 120px;
  display: grid;
}

.editor[contenteditable=true] {
  display: block;
  padding: 4px;
  border: 1px solid green;
}

<span class="drag-me" draggable="true">Drag me to the boxes below!</span>

<div class="editor">
  <textarea>While dragging over you should observe the cursor indicating the place where dragged text will appear.</textarea>
</div>

<div class="editor" contenteditable="true">While dragging over you should observe the cursor indicating the place where dragged text will appear.</div>

赞(0）回复(0）举报 2022-10-24

我来回答

如何将元素文本拖放到文本框中的特定位置？

1条答案

相关问题

热门标签

最新问答