如何使用带有段落元素的jQuery拖放 [英] How to use jQuery drag and drop with paragraph element
问题描述
我需要使用JQuery UI创建一个可自定义的段落.
I need to create a customizable paragraph with JQuery UI.
这是我的代码.
$(document).ready(function() {
var given = $("p.given").text();
var new_given = given.replace(/blank/g, ' <div class="blanks"></div> ');
$("p.given").html(new_given);
function updateDroppables() {
$("div.blanks").droppable({
accept: "span.given",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
var dropped = ui.draggable;
console.log(dropped);
dropped.hide();
console.log(dragedElement);
$(this).replaceWith(
" <span class='answers'><b class='blue-text' rel='" +
ui.draggable.attr("rel") +
"'>" +
dragedElement +
"</b> <a href='#' class='material-icons cancel md-16'>highlight_off</a></span> "
);
}
});
}
updateDroppables();
$("span.given").draggable({
helper: "clone",
revert: "invalid"
});
$(document).on("click", "a.cancel", function(e) {
e.preventDefault();
var rel = $(this).prev().attr('rel');
console.log(rel);
$(this)
.parent()
.replaceWith("<div class='blanks'></div>");
updateDroppables();
$('.btn-flat[rel=' + rel + ']').show();
});
});
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p><b><i>In the text below some words are missing. Drag words from the box below to the appropriate place in the text. To undo an answer choice, drag the word back to the box below the text.</i></b></p>
<div class="row">
<p class="given">
He wants to get a better [blank] and earn more money. Managers set objectives, and decide [blank] their organization can achieve them. A defect can be caused [blank] negligen ce by one of the members of a team.
</p>
</div>
<div class="divider"></div>
<br>
<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>
这行得通，但是问题是在上面的代码中，可拖动组件只能添加到[blank]区域.我需要在<p>段落的任何位置添加可拖动组件，该怎么办?这是代码笔示例，您可以播放并查看上面的代码如何工作
This works, but the problem is in the above code draggable components can only add to [blank] area. I need to add draggable components inside anywhere of the paragraph <p> how can I do it? this is code pen sample, you can play and see how above code works
很简单，我将上述代码更改如下，
Simple I change above code as follows,
$("p.given").droppable({
accept: "span.given",
classes: {
"ui-droppable-hover": "ui-state-hover"
}
，但是将整个段落<p>替换为拖动的组件.如何将可拖动组件添加到<p>标记的任何位置.
but it replaces whole paragraph <p> with the dragged component. how can add draggable components to anywhere of the paragraph <p> tag.
推荐答案
由于要完成的事情很多，因此需要准备很多东西.这是一个非常粗糙的例子.
Due to the number of things you want to accomplish, there is a whole lot of stuff you need to prepare. Here is a very rough example.
$(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 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>
这会将当前文本存储在<p>中，并用不间断空格包装每个单词.它尝试遵守句子语法.
This takes the current text in the <p> and wraps each word with a No Break Space. It tries to adhere to sentence syntax.
现在，每个单词都被包裹起来，我们可以将每个单词放下.假设一个单词将落在前一个单词上，并突出显示将在两个单词之间插入的两个单词.删除后，将创建一个新的<span>并将其附加在目标之后.我添加了一个"x"按钮将其删除.
Now that each word is wrapped we can then make each one droppable. This assumes a word will be drop on the preceding word and highlights the two words it would drop in between. Once dropped, a new <span> is created and appended after the target. I added a 'x' button to remove it.
这篇关于如何使用带有段落元素的jQuery拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
