I think you don't need to drag filled answer to another answer because users have multiple options and can drag every option to answer and when user do it answer modifies by latest option. It's make no sense user drags option after drop to answer. For doing this scenario you can do it like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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);
}
})
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
See Demo Code [link][1]
[1]: https://jsfiddle.net/t5u6L1vy/
I think you don't need to drag filled answer to another answer because users have multiple options and can drag every option to answer and when user do it answer modifies by latest option. It's make no sense user drags option after drop to answer. For doing this scenario you can do it like this:
$(document).ready(function() {
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$(this).addClass('matched');
}
});
$("ul li").draggable({
helper:"clone",
revert: "invalid"
});
})
[**Online demo (jsFiddle)**][1]
**Edit**
If you want to drag answers you can do it like this:
$(document).ready(function() {
// This code used for set order attribute for options
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 option
// 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);
}
})
[**Online demo (jsFiddle)**][2]
[1]: https://jsfiddle.net/ali_soltani/h7dusx03/
[2]: https://jsfiddle.net/ali_soltani/6yo9djcb/1/
