Response title
This is preview!
<style type="text/css">
.elearning_question_draggable {
cursor:pointer;
}
.droppable-hover {
outline: 2px dashed;
}
.no_style_elearning_question_dropped_answer {
cursor:pointer;
margin:2px;
}
.elearning_question_answer_field {
border-width:0px 0px 1px 0px;
border-style:solid;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".elearning_question_draggable").draggable({
helper: 'clone', // Drag a copy of the element
ghosting: true, // Display the element in semi transparent fashion when dragging
opacity: 0.5, // The transparency level of the dragged element
cursorAt: { top: 10, left: 10 }, // Position the mouse cursor in the dragged element when starting to drag
cursor: 'move', // Change the cursor shape when dragging
revert: 'invalid', // Put back the dragged element if it could not be dropped
containment: '.elearning_exercise_page' // Limit the area of dragging
});
$(".elearning_question_droppable").droppable({
accept: '.elearning_question_draggable', // Specify what kind of element can be dropped
hoverClass: 'droppable-hover', // Styling a droppable when hovering on it
drop: // Handle a drop event
function(ev, ui) {
// Update the answer id and display
$(this).find('input').attr("value", ui.draggable.attr("elearningAnswerId"));
$(this).find('span.elearning_question_answer_field').html(ui.draggable.html());
var participantAnswer = $(this).find('input').attr("value");
}
});
© 2013 jQuery Foundation
Sponsored by and others.