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

本文介绍了如何将组件拖放为第一个单词的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用jQuery UI的可拖动组件来添加可编辑的内容

.此代码可用于查找，但我有一个小问题.问题是我不能将可拖动组件作为第一个单词拖放，该如何解决?请帮我解决这个问题.

I'm using jQuery UI draggable component to add to content editable

.This code works to find and I have a little issue. The problem is I cannot drag and drop draggable component as first word, How can I solve this? Please help me to solve this.

注意::当前功能不能中断.

Note : the current functionlity cannot be break.

我的代码如下:

$(function() {
  function textWrapper(str, sp, btn) {
    if (sp == undefined) {
      sp = [0, 0];
    }
    var txt = "";
    if (btn) {
      txt = "<span class='w b'>" + str + "</span>";
    } else {
      txt = "<span class='w'>" + str + "</span>";
    }

    if (sp[0]) {
      txt = "&nbsp;" + txt;
    }

    if (sp[1]) {
      txt = txt + "&nbsp;";
    }

    return txt;
  }

  function chunkWords(p) {
    var words = p.split(" ");
    words[0] = textWrapper(words[0], [0, 1]);
    var i;
    for (i = 1; i < words.length; i++) {
      var re = /\[.+\]/;
      if (re.test(words[i])) {
        var b = makeTextBox(words[i].slice(1, -1));
        words[i] = "&nbsp;" + b.prop("outerHTML") + "&nbsp;";
      } else {
        if (words[0].indexOf(".")) {
          words[i] = textWrapper(words[i], [1, 0]);
        } else {
          words[i] = textWrapper(words[i], [1, 1]);
        }
      }
    }
    return words.join("");
  }

function unChunkWords(tObj) {
var words = "";
$(tObj).contents().each(function (i, el) {
  if ($(el).hasClass("b")) {
    words += "[" + $(el).text() + "]";
  } else {
    words += $(el).text();
  }
});
return words.replace(/\s+/g, " ").trim();
  }

  function makeBtn(tObj) {
    var btn = $("<span>", {
      class: "ui-icon ui-icon-close"
    }).appendTo(tObj);
  }

  function makeTextBox(txt) {
    var sp = $("<span>", {
      class: "w b"
    }).html(txt);
    makeBtn(sp);
    return sp;
  }

  function makeDropText(obj) {
    return obj.droppable({
      drop: function(e, ui) {
        var txt = ui.draggable.text();
        var newSpan = textWrapper(txt, [1, 0], 1);
        $(this).after(newSpan);
        makeBtn($(this).next("span.w"));
        makeDropText($(this).next("span.w"));
        $("span.w.ui-state-highlight").removeClass("ui-state-highlight");
      },
      over: function(e, ui) {
        $(this).add($(this).next("span.w")).addClass("ui-state-highlight");
      },
      out: function() {
        $(this).add($(this).next("span.w")).removeClass("ui-state-highlight");
      }
    });
  }

  $("p.given").html(chunkWords($("p.given").text()));

  $("p.given").on("click", ".b > .ui-icon", function() {
    $(this).parent().remove();
  });

  $("p.given").blur(function() {
    var w = unChunkWords($(this));
    console.log(w);
    $(this).html(chunkWords(w));
    makeDropText($("p.given span.w"));
  });

  $("span.given").draggable({
    helper: "clone",
    revert: "invalid"
  });

  makeDropText($("p.given span.w"));
});

p.given {
  display: flex;
  flex-wrap: wrap;
}

p.given span.w span.ui-icon {
  cursor: pointer;
}

div.blanks {
  display: inline-block;
  min-width: 50px;
  border-bottom: 2px solid #000000;
  color: #000000;
}

div.blanks.ui-droppable-active {
  min-height: 20px;
}

span.answers>b {
  border-bottom: 2px solid #000000;
}

span.given {
  margin: 5px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <p class="given" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<div class="divider"></div>
<div class="section">
  <section>
    <div class="card blue-grey ">
      <div class="card-content white-text">
        <div class="row">
          <div class="col s12">
            <span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span>
            <span class="given btn-flat white-text red lighten-1" rel="2">America</span>
            <span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span>
            <span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

推荐答案

您可以执行以下操作:

拖动正在进行中:

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

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

This visual indication will thus indicate whether the word will be inserted after the first word (2 are highlighted) or before it (1 is highlighted).

当用户放置元素时:

检查第一个单词是否突出显示，而不检查其他任何单词.
如果是这样，请在当前单词的之前插入新元素
如果没有，则在当前单词之后(在此单词之后)插入新元素

Check whether the first word is highlighted, and not any other.
If so, insert the new element before the current word
If not, insert the new element after the current word (like it was already done)

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

So, you need two changes in your code to make this work:

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

Add the following code for implementing the first part:

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");
});

修改drop处理程序以实现第二部分:

Modify the drop handler for implementing the second part:

drop: function(e, ui) {
    var txt = ui.draggable.text();
    // Use proper jQuery to create a new span element
    var newSpan = $("<span>").addClass('w b').text(txt);
    // Determine if the element is being dropped on the first word, and only that one
    if (!$(".ui-state-highlight").last().index()) {
        $(this).before(newSpan, "&nbsp;"); // ...then prepend
    } else {
        $(this).after("&nbsp;", newSpan); // normal case
    }
    makeBtn(newSpan);
    makeDropText(newSpan);
    $("span.w.ui-state-highlight").removeClass("ui-state-highlight");
},

修复`chunkWords`

由于某些原因，您在chunkWords中进行了硬编码，第一个单词(索引为0)不能被删除，它始终被解释为纯文本(标记为粗体).这也是您当前代码中的错误，您可以按以下方式重现它:

Fix in `chunkWords`

For some reason you had hard-coded in chunkWords that the first word (at index 0) could not be a dropped item -- it is always interpreted as plain text (marked as bold). This is a bug in your current code also, and you can reproduce it as follows:

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

您写道，现有行为不应中断，但从我的评论中我了解到您并不期望这种行为.

You wrote that existing behaviour should not break, but from comments I understand you did not expect this behaviour.

另一个问题是该功能存在以下情况:

Another issue is the following condition in that function:

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

...考虑一下:为什么 first 单词中的一个点会影响短语中另一个单词的间距?当然，您打算这样做:

...think about that: why would a point in the first word influence the spacing of another word in your phrase? Surely you intended to do:

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

无论如何，我建议完全不要使用textWrapper，并在最终的join中添加空格.没来.

Anyway, I would suggest to not use textWrapper at all, and add the spaces in your final join. Not before.

解决了这两个问题，chunkWords最终应该看起来像这样:

Fixing those two issues, that chunkWords should finally look like this:

  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
  }

与这些更改一样，不再使用textWrapper，您可以删除该功能.

As with these changes textWrapper is no longer used, you can remove that function.

在此小提琴

这篇关于如何将组件拖放为第一个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

highlighted