I need help with 2 issues:
1) draggability is disabled if a draggable element didn't drop on one of designated drop areas (e.g. if a user released left-mouse button unintentionally). In all other cases drag and drop works as expected: clone is created and is available for dragging and dropping into any of designated drop areas. I tried to "disabled: false" draggable but it didn't help.
2) only one answer should be accepted/allowed per "dropContainer" (e.g. .dropTarget_m_1_1_a should accept only one drop regardless the answer is correct or wrong). I tried to provide a more specific name via associative array (linking dropContainer and specific drop elements' id's) with no luck. I can hardcode it to disable a specific class i.e. $(".dropTarget_m_1_1_a").droppable("disable"); Unfortunately I need iteration e.g. going through each .dropTargetxxxxx class or each dropContainerxxx id.
Thank you very much in advance!!!
That's what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
ul {
list-style-type: none;
}
li.draggable {
list-style:none;
}
#button_list_1a li {
display: inline-block;
list-style-type: none;
width: 60px;
height: 10px;
margin-top: 70px;
}
#m_1_l_3 {
position: absolute;
top: 25px;
left: 80px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:blue;
}
#m_1_l_2 {
position: absolute;
top: 40px;
left: 80px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:red;
}
#m_1_l_1 {
position: absolute;
top: 55px;
left: 80px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:yellow;
}
#m_2_l_3 {
position: absolute;
top: 25px;
left: 210px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:blue;
}
#m_2_l_2 {
position: absolute;
top: 40px;
left: 210px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:red;
}
#m_2_l_1 {
position: absolute;
top: 55px;
left: 210px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:yellow;
}
#m_3_l_3 {
position: absolute;
top: 25px;
left: 350px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:blue;
}
#m_3_l_2 {
position: absolute;
top: 40px;
left: 350px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:red;
}
#m_3_l_1 {
position: absolute;
top: 55px;
left: 350px;
height: 15px;
width: 110px;
display:flex;
align-items:center;
z-index: 10;
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity=30);
background-color:yellow;
}
</style>
</head>
<body>
<div id="dropContainer_m_1">
<div id="m_1_l_3" class= "dropTarget_m_1_1_a droppable_1_a"></div>
<div id="m_1_l_2" class= "dropTarget_m_1_1_a droppable_1_a"></div>
<div id="m_1_l_1" class= "dropTarget_m_1_1_a droppable_1_a"></div>
<div id="dropContainer_m_2">
<div id="m_2_l_3" class= "dropTarget_m_2_1_a droppable_1_a"></div>
<div id="m_2_l_2" class= "dropTarget_m_2_1_a droppable_1_a"></div>
<div id="m_2_l_1" class= "dropTarget_m_2_1_a droppable_1_a"></div>
<div id="dropContainer_m_3">
<div id="m_3_l_3" class= "dropTarget_m_3_1_a droppable_1_a"></div>
<div id="m_3_l_2" class= "dropTarget_m_3_1_a droppable_1_a">
</div>
<div id="m_3_l_1" class= "dropTarget_m_3_1_a droppable_1_a"></div>
</div>
<ul id = "button_list_1a">
<!--// answers 1 a -->
<li class = "button_small draggable_1_a" id = "image#1" draggable="true">Image#1</li><!--
--><li class = "button_small draggable_1_a" id = "image#2" draggable="true">Image#2</li><!--
--><li class = "button_small draggable_1_a" id = "image#3" draggable="true">Image#3</li>
</ul>
<script>
$(document).ready(function a_1_dnd(){
$(".draggable_1_a").draggable({
cursorAt: {
top: 5,
left: 30
},
cursor : 'pointer',
revert : 'invalid',
opacity: 0.35,
helper: function (event) {
var id = $(this).attr('id');
var ret = $(this).clone();
ret.attr('dragId', id);
console.log('dragId: ', ret.attr('dragId'));
return ret;
},
start : function (event, ui) {
}, // end start
drag : function (event, ui) {
}, // end drag
stop : function(event, ui){
ui.helper.clone().appendTo ($(this).parent());
ui.helper.clone().disabled;
}
});
$(".droppable_1_a").droppable({
accept: ".draggable_1_a",
tolerance: 'pointer',
drop: function (event,ui) {
var draggable_id = ui.draggable.attr("id");
var droppable_id = $(this).attr("id");
var correctAnswer = {
m_1_l_1 : "image#1",
m_1_l_3 : "image#1",
m_2_l_2 : "image#2",
m_3_l_1 : "image#3"
};
if(correctAnswer[droppable_id] === draggable_id)
{
console.log(ui);
$(ui.draggable).attr('id', $(ui.helper).attr('id'));
console.log(droppable_id);
localStorage.totalCorrectAnswers = parseFloat(localStorage.totalCorrectAnswers) + 1.0;
} else {
console.log(ui.helper.attr( "dragId" ));
console.log("Wrong!!!");
console.log(droppable_id);
}
}
});
});
</script>
</body>
</html>
The first thing you should look at is a clone you create. After «mouseup» event in the area which is not area for dropping the clone is moving on the place where original droppable element is.
And the clone is the thing which prevents your element from being clicked. In fact, you click on the clone, not on the droppable element
So I would recommend you to attach the clone to the droppable element which means to move these lines
ui.helper.clone().appendTo ($(this).parent());
ui.helper.clone().disabled;
to the «drop» event handler of the droppable element instead of draggable. Thus you will create a clone only if draggable element was dropped in the one of three containers. Take into account that you will need to modify your CSS to get the clone visible.
The second issue might me solved in the same handler, you should put something like
$(this).parent().find(".droppable_1_a").droppable({ disabled: true });
there.
This line will disable all droppable elements in one parent container