How Can I Type Text After Dropped Content

September 12, 2023 Post a Comment

I'm using jQuery UI draggable component to add to content editable .This code works to find and I have little issues. The problem is when I dropped the draggable component as the l

Solution 1:

Issue 1

To allow typing text after the dropped element, change this line:

return words.join("&nbsp;");

to:

return words.join("&nbsp;") + "&nbsp;";

You may even add multiple spaces, like + "   " which would make it even easier to find the spot where the caret can be put.

Issue 2

The apply contenteditable = false to the "buttons" already present in the text when the page loads, add the line you already use in the load script, for instance after this line:

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

...so it becomes:

Baca Juga

$("p.given").html(chunkWords($("p.given").text()));
$('span.b').attr('contentEditable', false);

Additional suggestion

I find it confusing that the cursor is a pointer when hovering over the editable paragraph. I would suggest removing this line from the CSS specs for p.given:

cursor: pointer !important;

And I would add this CSS definition, so there is a cursor difference when you hover over a "button":

p.givenspan.b {
  cursor: default;
}

Snippet

$(function() {

  document.addEventListener("mousemove", function() {
    var $draggable = $(".ui-draggable-dragging");
    if (!$draggable.length) return; // nothing is being draggedvar $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 draggedvar dragX = $draggable.offset().left + $draggable.width() / 2;
    // Get center x coordinate of the first word in the paragraphvar 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 highlightedif ((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");
  });

  functionchunkWords(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;") + "&nbsp;"; // add the spaces here
  }


  functionunChunkWords(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();
  }

  functionmakeBtn(tObj) {
    var btn = $("<span>", {
      class: "ui-icon ui-icon-close"
    }).appendTo(tObj);
    $('span.b').attr('contentEditable', false);
  }

  functionmakeTextBox(txt) {
    var sp = $("<span>", {
      class: "w b"
    }).html(txt);
    $('.b').attr('contentEditable', false);
    makeBtn(sp);
    return sp;
  }

  functionmakeDropText(obj) {
    return obj.droppable({
      drop: function(e, ui) {
        var txt = ui.draggable.text();
        // Use proper jQuery to create a new span elementvar newSpan = $("<span>").addClass('w b').text(txt);
        // Determine if the element is being dropped on the first word, and only that oneif (!$(".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");
      },
      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()));
  $('span.b').attr('contentEditable', false);

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

  $("p.given").blur(function() {
    var w = unChunkWords($(this));
    $(this).html(chunkWords(w));
    makeDropText($("p.given span.w"));
    $('.b').attr('contentEditable', false);
  });


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

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

p.given {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

p.givenspan.wspan.ui-icon {
  cursor: pointer;
}

p.givenspan.b {
  cursor: default;
  # add this
}

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

.w ui-droppable {
  cursor: pointer !important;
}

.w.b.ui-droppable {
  background: #FF8;
  color: #000;
}

.given.btn-flat {
  display: inline-block;
  padding: 0.25em0.5em;
  border-radius: 1em;
  background: #A72020;
  color: #FFF;
  cursor: pointer;
}

.ui-draggable-dragging {
  background: #FFD700!important;
}

<divclass="row"><pid="doc_navc"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><divclass="divider"></div><divclass="section"><section><divclass="card blue-grey "><divclass="card-content white-text"><divclass="row"><divid="walkinDiv"class="col s12"><spanclass="given btn-flat white-text red lighten-1"rel="1">the Santee, thDakota</span><spanclass="given btn-flat white-text red lighten-1"rel="2">America</span><spanclass="given btn-flat white-text red lighten-1"rel="3">FirstName</span><spanclass="given btn-flat white-text red lighten-1"rel="4">LastName</span></div></div></div></div></section></div><inputname="Go"id="btnPass"class="tstHeck"type="button"value="Go"onclick="" /><inputname="Go"id="btnTxt"class="tstHeck"type="button"value="Go"onclick="" /><linkrel="stylesheet"href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

JavaScript General