javascript — перетащите в абзац с помощью JQuery

Перетащите {amp}lt;span{amp}gt; в абзац, используя JQuery.

Вы должны только задавать практические, отвечающие на вопросы вопросы, основанные на реальных проблемах, с которыми вы сталкиваетесь. Болтливые, открытые вопросы уменьшают полезность нашего сайта и отталкивают другие вопросы от главной страницы.

Ваши вопросы должны быть в разумных пределах. Если вы можете представить себе целую книгу, которая отвечает на ваш вопрос, вы спрашиваете слишком много.

 $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "{amp}lt;span class='w b'{amp}gt;"   str   "{amp}lt;/span{amp}gt;"; } else { txt = "{amp}lt;span class='w'{amp}gt;"   str   "{amp}lt;/span{amp}gt;"; } if (sp[0]) { txt = "{amp}amp;nbsp;"   txt; } if (sp[1]) { txt = txt   "{amp}amp;nbsp;"; } return txt; } function chunkWords(p) { var words = p.split(" "); words[0] = textWrapper(words[0], [0, 1]); var i; for (i = 1; i {amp}lt; words.length; i  ) { var re = /[. ]/; if (re.test(words[i])) { var b = makeTextBox(words[i].slice(1, -1)); words[i] = "{amp}amp;nbsp;"   b.prop("outerHTML")   "{amp}amp;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 = []; $(".w", tObj).each(function(i, el) { console.log($(el).text(), $(el).attr("class")); if ($(el).hasClass("b")) { words.push("["   $(el).text().trim()   "]"); } else { words.push($(el).text().trim()); } }); return words.join(" "); } function makeBtn(tObj) { var btn = $("{amp}lt;span{amp}gt;", { class: "ui-icon ui-icon-close" }).appendTo(tObj); } function makeTextBox(txt) { var sp = $("{amp}lt;span{amp}gt;", { class: "wb" }).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 {amp}gt; .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{amp}gt;b { border-bottom: 2px solid #000000; } span.given { margin: 5px; } 
 {amp}lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-1.12.4.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;p class="given" contenteditable="true"{amp}gt;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.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="divider"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="section"{amp}gt; {amp}lt;section{amp}gt; {amp}lt;div class="card blue-grey "{amp}gt; {amp}lt;div class="card-content white-text"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col s12"{amp}gt; {amp}lt;span class="given btn-flat white-text red lighten-1" rel="1"{amp}gt;the Santee, thDakota{amp}lt;/span{amp}gt; {amp}lt;span class="given btn-flat white-text red lighten-1" rel="2"{amp}gt;America{amp}lt;/span{amp}gt; {amp}lt;span class="given btn-flat white-text red lighten-1" rel="3"{amp}gt;Qatar{amp}lt;/span{amp}gt; {amp}lt;span class="given btn-flat white-text red lighten-1" rel="4"{amp}gt;Philippines{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;/div{amp}gt; 

Используя событие blur , мы можем вернуть обернутые элементы обратно в текст и затем снова скопировать их с новым содержимым. Чтобы сохранить кнопки, я использовал [ и ] .

Я использовал .on() и .blur() по определенным причинам.

Метод .on() присоединяет обработчики событий к .on() выбранному набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функциональные возможности, необходимые для подключения обработчиков событий.

Преимущество обработчиков делегированных событий заключается в том, что они могут обрабатывать события от элементов-потомков, которые добавляются в документ позднее. Выбрав элемент, который гарантированно будет присутствовать во время присоединения делегированного обработчика событий, вы можете использовать делегированные обработчики событий, чтобы избежать необходимости часто подключать и удалять обработчики событий. Этот элемент может быть, например, контейнерным элементом представления в модели Model-View-Controller или document если обработчик событий хочет отслеживать все всплывающие события в document . Элемент document доступен в head документа перед загрузкой любого другого HTML-кода, поэтому безопасно прикреплять туда события, не дожидаясь готовности документа.

Смотреть больше: .on ()

Это важно, поскольку мы динамически создаем элементы и хотим, чтобы обратный вызов был делегирован этим элементам, даже если они еще не существуют.

Этот метод является ярлыком для .on( "blur", handler )

Событие размытия отправляется элементу, когда он теряет фокус. Первоначально это событие было применимо только к элементам формы, таким как {amp}lt;input{amp}gt; . В последних браузерах домен события был расширен, чтобы включить все типы элементов. Элемент может потерять фокус с помощью клавиатурных команд, таких как клавиша Tab, или щелчком мыши в другом месте на странице.

Смотреть больше: .blur ()

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector