Hi, I am trying to set up a question that has the visual output displayed in the image.
Action requested for the task of this question: select images from the right and left column and drag and drop the selected images to an empty box of the central column. After dropping both images in the selected empty box, the two images will overlay to each other with a minimal transparency so both images can be seen in the selected box of the central column.
After several corrections to the HTML, CSS and Java script code, the drag and drop action does not work. I cannot move the images of the two external columns to the selected box of the central column.
I share here my codes and I hope that someone can help me to allow the drag and drop action within this question.
JAVASCRIPT CODE:
Qualtrics.SurveyEngine.addOnload(function() {
// Wait for the DOM to be fully loaded
jQuery(function($) {
// Make images draggable
$('.draggable').draggable({
helper: 'clone', // Use a clone of the image as the drag avatar
revert: 'invalid', // Revert to the original position if not dropped on a droppable target
containment: 'document', // Allows dragging outside the bounds of the original parent
opacity: 0.6, // Make the clone slightly transparent while dragging
start: function(event, ui) {
$(ui.helper).css({
width: '620px', // Ensure the clone maintains the same size
height: '650px'
});
}
});
// Make the target boxes droppable
$('.target').droppable({
accept: '.draggable', // Only accept elements with the 'draggable' class
drop: function(event, ui) {
// Check if the target already has two images
if ($(this).find('img').length < 2) {
// Clone the draggable image, reset any applied styles, and then set necessary styles
var clone = $(ui.draggable).clone();
$(this).append(clone); // Append the clone to the target box
clone.removeClass('draggable ui-draggable ui-draggable-handle')
.css({
position: 'absolute',
width: '620px',
height: '650px',
top: 0,
left: 0,
opacity: 0.5 // Make the image semi-transparent to allow overlay visibility
});
}
}
});
});
});
HTML CODE:
<div id="drag-drop-container" style="display: flex; justify-content: space-between;">
<div class="column" id="left-column">
<!-- Example Placeholder for Left Images -->
<!-- Replace `#` with your actual image URLs -->
<img src= "URLIMAGE1" class="draggable" alt="Left Image 1"; style="width: 620px; height: 650px">
<img src= "URLIMAGE2" class="draggable" alt="Left Image 2"; style="width: 620px; height: 650px">
<img src= "URLIMAGE3" class="draggable" alt="Left Image 3"; style="width: 620px; height: 650px">
<img src= "URLIMAGE4" class="draggable" alt="Left Image 4"; style="width: 620px; height: 650px">
<img src= "URLIMAGE5" class="draggable" alt="Left Image 5"; style="width: 620px; height: 650px">
</div>
<div class="column" id="central-column">
<!-- 5 Empty Boxes -->
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
</div>
<div class="column" id="right-column">
<!-- Example Placeholder for Right Images -->
<!-- Replace `#` with your actual image URLs -->
<img src= "URLIMAGE6"class="draggable" alt="Right Image 1"; style="width: 620px; height: 650px">
<img src= "URLIMAGE7" class="draggable" alt="Right Image 2"; style="width: 620px; height: 650px">
<img src= "URLIMAGE8" class="draggable" alt="Right Image 3"; style="width: 620px; height: 650px">
<img src= "URLIMAGE9" class="draggable" alt="Right Image 4"; style="width: 620px; height: 650px">
<img src= "URLIMAGE10" class="draggable" alt="Right Image 5"; style="width: 620px; height: 650px">
</div>
</div>
CSS CODE:
.Skin .SkinInner {
width: auto!important;
max-width: 80%!important;
}
#drag-drop-container {
display: flex;
justify-content: space-between;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
gap: 80px; /* Space between elements vertically within columns */
}
.draggable, .target {
width: 620px;
height: 650px;
margin-bottom: 20px; /* Space between images or targets */
cursor: grab; /* Indicates that the item is draggable */
}
.target {
border: 2px dashed #ccc;
position: relative; /* Enables absolute positioning of dropped images */
}
.dropped {
position: absolute;
top: 0;
left: 0;
opacity: 0.5; /* Semi-transparent to see both images when overlaid */
}