Saya menggunakan komponen jQuery UI yang dapat diseret untuk menambah konten yang dapat diedit
.Kode ini berfungsi untuk menemukan dan saya memiliki sedikit masalah. Masalahnya adalah ketika saya menghilangkan komponen yang dapat diseret sebagai kata terakhir paragraf. Saya tidak bisa mengetik teks setelah komponen yang dijatuhkan itu.
dan masalah kedua adalah, saya perlu menonaktifkan opsi contentEditable dari kata-kata (rentang dengan opsi yang dapat dilepas), untuk mencapai itu saya menambahkan kode ini ($('.b').attr('contentEditable', false);) di dalam acara $("p.given").blur. Ini berfungsi dengan baik. Saya perlu melakukan hal yang sama ketika halaman dimuat. bagaimana saya bisa melakukannya? dapatkah saya menambahkan atribut contentEditable = false yang hanya memiliki opsi yang dapat dihapus.
Catatan: fungsi saat ini tidak boleh terputus.
Kode saya sebagai berikut:
<link rel="stylesheet" href="http://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>
<style>
p.given {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
cursor: pointer !important;
}
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;
}
.w ui-droppable{
cursor: pointer !important;
}
.w.b.ui-droppable {
background: #FF8;
color: #000;
}
.given.btn-flat {
display: inline-block;
padding: 0.25em 0.5em;
border-radius: 1em;
background: #A72020;
color: #FFF;
cursor: pointer;
}
.ui-draggable-dragging {
background: #FFD700 !important;
}
</style>
<div class="row">
<p id="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>
<div class="divider"></div>
<div class="section">
<section>
<div class="card blue-grey ">
<div class="card-content white-text">
<div class="row">
<div id="walkinDiv" 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">FirstName</span>
<span class="given btn-flat white-text red lighten-1" rel="4">LastName</span>
</div>
</div>
</div>
</div>
</section>
</div>
<input name="Go" id="btnPass" class="tstHeck" type="button" value="Go" onclick=""/>
<input name="Go" id="btnTxt" class="tstHeck" type="button" value="Go" onclick=""/>
<script language="javascript" type="text/javascript">
$(function() {
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");
});
function chunkWords(p) {
console.log("sasasa");
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 " " at this moment:
words[i] = b.prop("outerHTML");
}
return words.join(" "); // add the spaces here
}
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);
$('span.b').attr('contentEditable', false);
}
function makeTextBox(txt) {
var sp = $("<span>", {
class: "w b"
}).html(txt);
$('.b').attr('contentEditable', false);
makeBtn(sp);
return sp;
}
function makeDropText(obj) {
return obj.droppable({
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, " "); // ...then prepend
} else {
$(this).after(" ", 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()));
$("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"));
$('.b').attr('contentEditable', false);
});
$("span.given").draggable({
helper: "clone",
revert: "invalid"
});
makeDropText($("p.given span.w"));
});
</script>
