前端 - 列表的文本框不点（光标）直接拖标签到指定的位置上？

Question

代码如下：

    <el-row>        <el-col :span="4" class="draggable">            <el-tag size="large">标签一</el-tag>            <el-tag size="large" type="success">标签二</el-tag>            <el-tag size="large" type="info">标签三</el-tag>            <el-tag size="large" type="warning">标签四</el-tag>            <el-tag size="large" type="danger">标签五</el-tag>        </el-col>        <el-col :span="20" class="draggable">            <editor v-model="content" :init="init" :disabled="disabled"></editor>        </el-col>    </el-row>

js代码：

rowDrop() {        // 此时找到的元素是要拖拽元素的父容器        const tbody = document.querySelector('.draggable');        const _this = this;        let tinyEditor = this.myEditor        Sortable.create(tbody, {            //  指定父元素下可被拖拽的子元素            draggable: ".draggable span",            onEnd(evt) {                // 获取拖拽元素在表格中的位置                  const dropRowIndex = evt.newIndex; // Sortable.js提供的newIndex表示插入位置的索引                  let ieSelectionBookmark = ieSelectionBookmark = tinyEditor.selection                tinyEditor.selection.moveToBookmark(ieSelectionBookmark);                _this.myEditor.execCommand('mceInsertContent', true, "<span style='color: #f1c40f;font-size:25px; background-color: #c2e0f4;'>{" + evt.clone.innerText + "}</span>")            }        });    },

展示的页面

问题是点击箭头的列表某一个文本框，会有光标，把左上角的标签拖到有光标的文本框会在这里展示，现在是实现了，同时列表的文本框不点（光标）直接拖标签到指定的位置上，但现在拖到列表里红色箭头里，直接在列表上边展示了，上图所示

希望列表的文本框不点（光标）直接拖标签到指定的位置上，如上图红色箭头的位置，或者其他位置上，大佬们，上面就是现在的代码，请问这怎么实现呢

Answer 1

要实现通过拖拽将标签插入到指定的文本框中，你需要使用一些交互性 JavaScript 库，例如 Sortable.js 或者 Dragula。这些库可以让你对 DOM 元素进行拖拽操作。

你的问题是，当你直接将标签拖拽到一个文本框时，你希望在文本框中插入这个标签，而不是在文本框的父元素中。要解决这个问题，你需要让 Sortable.js 在 onEnd 事件中返回的是被拖拽元素的父元素，而不是被拖拽元素本身。然后你可以在 onEnd 事件中使用这个父元素来查找最近的文本框，然后将标签插入到那个文本框中。

下面是一个可能的解决方案：

rowDrop() {    const tbody = document.querySelector('.draggable');    const _this = this;    let tinyEditor = this.myEditor    // 使用 Sortable.js 创建可拖拽的元素    Sortable.create(tbody, {        draggable: ".draggable span",        onEnd(evt) {            // 获取拖拽元素在表格中的位置              const dropRowIndex = evt.newIndex; // Sortable.js提供的newIndex表示插入位置的索引              // 获取被拖拽元素的父元素            const dropParent = evt.item.parentNode;            // 在父元素中查找最近的文本框元素            const targetEditor = dropParent.querySelector('.el-input[type="text"]');            if (targetEditor) {                tinyEditor.selection.moveToBookmark(ieSelectionBookmark);                _this.myEditor.execCommand('mceInsertContent', true, "<span style='color: #f1c40f;font-size:25px; background-color: #c2e0f4;'>{" + evt.clone.innerText + "}</span>");                targetEditor.focus(); // 将焦点设置在文本框中            }        }    });},

注意，以上代码假设 .el-input[type="text"] 是文本框的选择器，你需要根据你的实际情况来修改这个选择器。此外，这段代码也假设了 ieSelectionBookmark 是你之前创建的文本框的选中状态，你需要确保这个选中状态在拖拽结束后仍然存在。如果这个选中状态可能会消失，你可能需要在 onEnd 事件中重新创建它。