Drag and drop <span> to paragraph using JQuery

A

Adam

Guest
I need to drag and drop <span> to <p>. My code works, but I have 3 problems,


  1. When I edit <p> content by typing something(suppose three words) and after drag <span> to <p> newly typed words acting as one word. So cannot drop draggable components between those newly typed content.


  2. After the close, the added draggable components(by clicking X) two spaces are remaining between two words.


  3. Cannot drop the draggable component as the 1 word of the paragraph.

To sort out the 3rd issue I added &nbsp; to the 1st of the paragraph. and it's sorted.

<p class="given" contenteditable="true">&nbsp; Lorem Ipsum is simply dummy</p>


How can I sort out the other two issues? Please help


$(function() {
function textWrapper(str, sp) {
if (sp == undefined) {
sp = [0, 0];
}
var 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++) {
if (words[0].indexOf(".")) {
words = textWrapper(words, [1, 0]);
} else {
words = textWrapper(words, [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 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>

Continue reading...
 
Top