我正在尝试使用本机html5 javascript拖放功能来创建自己的空白脚本。
但是现在我在交换和更换盒子时遇到了问题。当我将一个框拖到非空框中而不是替换时，该框将附加到该框上。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
if (ev.target.tagName == "DIV") {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
var srcParent = data.parentNode;
var tgt = ev.currentTarget.firstElementChild;
ev.currentTarget.replaceChild(data, tgt);
ev.appendChild(data);
} else {
console.log(ev.target.childNodes);
}
}.text-secondary {
color: #6c757d !important;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
p,
a,
body,
button,
label,
img,
div,
i,
span,
footer,
header,
section,
textarea,
input,
select {
font-family: Segoe !important;
}
* {
font-family: Segoe !important;
}
*,
::after,
::before {
box-sizing: border-box;
}
user agent stylesheet div {
display: block;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
}
.ml-1,
.mx-1 {
margin-left: .25rem !important;
}
.mr-1,
.mx-1 {
margin-right: .25rem !important;
}
.border-dark {
border-color: #343a40 !important;
}
.border {
border: 1px solid #dee2e6 !important;
}
#fillstodrag div {
margin: 30px !important;
background: white;
}<div class="card-body text-secondary">
<span style="line-height:40px;" class="font-weight-bold">The</span>
<div ondrop="drop(event)" ondragover="allowDrop(event)" class=" border border-dark mx-1" style="display:inline-block;height: 1.6rem; width: 9rem;margin-right:4px;margin-left:2px; ">
</div>
<span style="line-height:40px;" class="font-weight-bold">observer recognize the</span>
<div ondrop="drop(event)" ondragover="allowDrop(event)" class=" border border-dark mx-1" style="display:inline-block;height: 1.6rem; width: 9rem;margin-right:4px;margin-left:2px; ">
</div>
<span style="line-height:40px;" class="font-weight-bold">in how a teacher inquisitive or</span>
<div ondrop="drop(event)" ondragover="allowDrop(event)" class=" border border-dark mx-1" style="display:inline-block;height: 1.6rem; width: 9rem;margin-right:4px;margin-left:2px; ">
</div>
<span style="line-height:40px;" class="font-weight-bold">student. </span>
<div class="card-body text-secondary" id="fillstodrag" ondrop="drop(event)" ondragover="allowDrop(event)">
<div style="margin-right:2px;float:left;height: 1.6rem; width: 9rem; text-align: center" id="59_193_2" draggable="true" class="border border-primary font-weight-bold" ondragstart="drag(event)">good
</div>
<div style="margin-right:2px;float:left;height: 1.6rem; width: 9rem; text-align: center" id="59_187_3" draggable="true" class="border border-primary font-weight-bold" ondragstart="drag(event)">talkative
</div>
<div style="margin-right:2px;float:left;height: 1.6rem; width: 9rem; text-align: center" id="59_191_4" draggable="true" class="border border-primary font-weight-bold" ondragstart="drag(event)">professional
</div>
<div style="margin-right:2px;float:left;height: 1.6rem; width: 9rem; text-align: center" id="59_192_9" draggable="true" class="border border-primary font-weight-bold" ondragstart="drag(event)">quiet
</div>
<div style="margin-right:2px;float:left;height: 1.6rem; width: 9rem; text-align: center" id="59_185_10" draggable="true" class="border border-primary font-weight-bold" ondragstart="drag(event)">skill
</div>
</div>
演示链接：
答案 0 :(得分：2)
我认为您不需要将填充的答案拖到另一个答案，因为用户有多个选项，并且可以拖动每个选项来回答，并且当用户这样做时，答案会由最新选项修改。用户拖放答案后没有任何意义。为此，您可以这样操作：
$(document).ready(function() {
// This code used for set order attribute for items
var numberOfItems = $("#options").find('li').length;
$.each($("#options").find('li'), function(index, item) {
$(item).attr("order", index);
var removeBotton = $('<i class="fa fa-times" style="display:none"></i>');
removeBotton.click(function(){
addToOlderPlace($(this).parent());
});
$(item).append(removeBotton);
});
$("span").droppable({
accept: "li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
// Check for existing another option
if($(this).find('li').length > 0)
addToOlderPlace($(this).find('li'));
$(this).addClass("ui-state-highlight");
$(this).addClass('matched');
$(ui.draggable).find('i').attr("style","");
$(this).append($(ui.draggable));
}
});
$("li").draggable({
helper:"clone",
revert: "invalid"
});
// This function used for find old place of item
function addToOlderPlace($item) {
var indexItem = $item.attr('order');
var itemList = $("#options").find('li');
$item.find('i').hide();
if (indexItem === "0")
$("#options").prepend($item);
else if (Number(indexItem) === (Number(numberOfItems)-1))
$("#options").append($item);
else
$(itemList[indexItem - 1]).after($item);
}
})li {
list-style-type : none;
}
span {
width: 100px;
display: inline-block;
height: 27px;
vertical-align: middle;
border: 1px solid lightgrey;
}
body {
font: 13px Verdana;
}
ul li {
display: inline-block;
margin: 0 10px;
padding: 10px;
border: 1px solid lightgrey;
border-radius: 10%;
}
p {
padding: 10px;
white-space: nowrap;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul id="options">
<li>good</li>
<li>talkative</li>
<li>professional</li>
<li>quiet</li>
<li>skill</li>
<li>six</li>
</ul>
<p>The
<span></span> observer recognize the
<span></span> in how a teacher inquisitive or
<span></span>student
<span></span>
</p>
请参见演示代码link