Javascript 如何拖放组件作为第一个单词

我正在使用jQuery UI可拖动组件添加到可编辑的内容。问题是我不能拖放可拖动组件作为第一个单词，我如何解决这个问题？请帮我解决这个问题

注意：当前功能不能中断

我的代码如下：

$（函数（）{
函数textWrapper（str、sp、btn）{
如果（sp==未定义）{
sp=[0,0]；
}
var txt=“”；
如果（btn）{
txt=”“+str+”；
}否则{
txt=”“+str+”；
}
如果（sp[0]）{
txt=”“+txt；
}
如果（sp[1]）{
txt=txt+“”；
}
返回txt；
}
虚词（p）{
var words=p.split（“”）；
单词[0]=textWrapper（单词[0]，[0,1]）；
var i；
for（i=1；i.ui图标），函数（）上{
$（this.parent（）.remove（）；
});
$（“p.given”）.blur（函数（）{
var w=未排序的单词（$（此））；
控制台日志（w）；
$（this.html（chunkWords（w））；
makeDropText（$（“p.给定span.w”）；
});
$（“给定跨度”）.draggable({
助手：“克隆”，
回复：“无效”
});
makeDropText（$（“p.给定span.w”）；
});
p{
显示器：flex；
柔性包装：包装；
}
p、 给定span.w span.ui-icon{
光标：指针；
}
空白处{
显示：内联块；
最小宽度：50px；
边框底部：2倍实心#000000；
颜色：#000000；
}
div.blanks.ui-droppable-active{
最小高度：20px；
}
span.答案>b{
边框底部：2倍实心#000000；
}
给定的跨度{
保证金：5px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。[Lorem]Ipsum自15世纪以来一直是行业标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本

达科他州桑蒂酒店
美国
卡塔尔
菲律宾
您可以执行以下操作：

1.确定是否在第一个元素之前插入
正在进行拖动时：


当可拖动元素悬停在文本中的第一个单词上时进行监视
如果是这样，请检查它是否更多地悬停在单词的左侧或右侧
如果左侧有更多，则删除第二个单词的突出显示
如果向右偏多，则恢复第二个单词的突出显示

因此，该视觉指示将指示该单词是在第一个单词（2突出显示）之后插入，还是在第一个单词（1突出显示）之前插入

2.相应地执行下降
当用户删除元素时：


检查是否突出显示第一个单词，而不是任何其他单词
如果是，请在当前单词之前插入新元素
如果不是，则在当前单词后插入新元素（就像已经完成一样）

因此，您需要在代码中进行两项更改才能使其正常工作：

添加以下代码以实现第一部分：

document.addEventListener("mousemove", function() {
    var $draggable = $(".ui-draggable-dragging");
    if (!$draggable.length) return; // nothing is being dragged
    var $highlighted = $(".ui-state-highlight");
    if (!$highlighted.length || $($highlighted).index() > 0) return; // first word is not highlighted
    // Get center x coordinate of the item that is being dragged
    var dragX = $draggable.offset().left + $draggable.width() / 2;
    // Get center x coordinate of the first word in the paragraph
    var firstX = $highlighted.offset().left + $highlighted.width() / 2;
    // If draggable is more on the left side of the first word, then only the first word should be highlighted
    if ((dragX < firstX) === ($highlighted.length < 2)) return; // Situation is as it should be
    // Toggle the highlight on the second word of the paragraph
    $highlighted.first().next("span.w").toggleClass("ui-state-highlight");
});

固定在
chunkWords
出于某种原因，您在
chunkWords
中硬编码了第一个单词（索引0处）不能是删除的项目——它总是被解释为纯文本（标记为粗体）。这也是您当前代码中的一个bug，您可以按如下方式复制它：


在前两个单词之间插入一个单词
编辑文本并删除第一个单词，以便删除的单词成为第一个单词
退出可编辑区域
现在，第一个单词不再是删除的元素，而是带有“按钮”标记（方括号）的单词

您曾写道，现有的行为不应中断，但从评论中我了解到，您没有预料到这种行为

另一个问题是该功能中的以下情况：

if (words[0].indexOf(".")) {

…想想看：为什么第一个单词中的一个点会影响你短语中另一个单词的间距？你肯定打算这样做：

if (words[i].indexOf(".")) {

无论如何，我建议不要使用
textWrapper
，而是在最后的
join
中添加空格。以前没有

解决了这两个问题，
chunkWords
最终应该是这样的：

  function chunkWords(p) {
    var words = p.split(" "), b;
    for (var i = 0; i < words.length; i++) {
      if (/\[.+\]/.test(words[i])) {
        b = makeTextBox(words[i].slice(1, -1));
      } else {
        b = $("<span>").addClass("w").text(words[i]);
      }
      // do not pad the value with "&nbsp;" at this moment:
      words[i] = b.prop("outerHTML");
    }
    return words.join("&nbsp;"); // add the spaces here
  }

函数组词（p）{
var words=p.split（“”），b；
for（var i=0；i  function chunkWords(p) {
    var words = p.split(" "), b;
    for (var i = 0; i < words.length; i++) {
      if (/\[.+\]/.test(words[i])) {
        b = makeTextBox(words[i].slice(1, -1));
      } else {
        b = $("<span>").addClass("w").text(words[i]);
      }
      // do not pad the value with "&nbsp;" at this moment:
      words[i] = b.prop("outerHTML");
    }
    return words.join("&nbsp;"); // add the spaces here
  }