Мне нужно перетащить <span> в <p>. Мой код работает, но у меня есть 3 проблемы,
Когда я редактирую <p> контент, набирая что-то (предположим, три слова) и после перетаскивания <span> в <p> вновь набранные словадействуя как одно слово. Поэтому нельзя перетаскивать перетаскиваемые компоненты между вновь введенным содержимым.
После закрытия добавленные перетаскиваемые компоненты (путем нажатия X) между двумя словами остаются два пробела.
Невозможно удалить перетаскиваемый компонент как 1 слово абзаца.
Чтобы разобрать 3-й выпуск, я добавил к 1-му абзацу,и это отсортировано.
<p class="given" contenteditable="true"> Lorem Ipsum is simply dummy</p>
Как я могу разобраться с двумя другими проблемами? Пожалуйста, помогите
$(function() {
function textWrapper(str, sp) {
if (sp == undefined) {
sp = [0, 0];
}
var txt = "<span class='w'>" + str + "</span>";
if (sp[0]) {
txt = " " + txt;
}
if (sp[1]) {
txt = txt + " ";
}
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++) {
if (words[0].indexOf(".")) {
words[i] = textWrapper(words[i], [1, 0]);
} else {
words[i] = textWrapper(words[i], [1, 1]);
}
}
return words.join("");
}
function makeBtn(tObj) {
var btn = $("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(tObj);
btn.click(function(e) {
$(this).parent().remove();
});
}
function makeDropText(obj) {
return obj.droppable({
drop: function(e, ui) {
var txt = ui.draggable.text();
var newSpan = textWrapper(txt, [1, 0]);
$(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()));
$("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 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">Qatar</span>
<span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span>
</div>
</div>
</div>
</div>
</section>
</div>
Обновлено: 2019-10-22
Я обновил вопрос, потому что столкнулся с проблемой, когдаЯ генерирую перетаскиваемые компоненты <span> из кода. Я сгенерировал перетаскиваемые компоненты следующим образом. Его можно создавать и перетаскивать до <p>. но когда я щелкаю по <p> и щелкаю снаружи из выпадающего компонента <p> (что означает в событии размытия) не отображается кнопка закрытия. это показывает как [Ameriaca] , [Qatatr] Почему это так происходит? как я могу избежать этого. Я назвал это GetAllParameters() внутри $(function() {});
function GetAllParameters() {
$.ajax({
type: "POST",
url: SERVER_PATH + '/service/TestService.asmx/GetAllParameters',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: GetAllNotificationParametersComplete,
error: GetAllNotificationParameterFailed
});
}
function GetAllNotificationParametersComplete(result, status) {
NotificationParameters = JSON.parse(result.d);
getTemplateparameters(NotificationParameters,'ShowIn');
}
function GetAllNotificationParameterFailed(result) {
//console.log(result);
}
function getTemplateparameters(data,field) {
var filtered = data.filter(function(item) {
return item[field] == true;
});
populateTemplateParameters(filtered);
}
function populateTemplateParameters(data) {
var obj = data;
var stringlist = "";
$.each(obj, function (index, item) {
stringlist = stringlist + ' <span class="given btn-flat white-text red lighten-1 parameter-wrapper">' +item.ParameterName+ '</span>';
});
$("#walkinDiv").html(stringlist);
$("span.given").draggable({
helper: "clone",
revert: "invalid"
});
makeDropText($("p.given span.w"));
}
Обновлено: 2019-10-23
Ранее упомянутая проблема возникает, когда перетаскиваемый компонент имеет два словатакие как "Hello World" И одна вещь, которую я опознал. Когда я что-то набираю внутри редактируемого <p> и нажимаю снаружи набранные слова <p>, удаляя, это большая проблема. пожалуйста, помогите мне решить эту проблему