<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="containment-wrapper-1" class="questionContainer clearfix">
<div class="leftContainer">
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
</div>
<div class="rightContainer">
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 1
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 2
</div>
</div>
</div>
</div>
<div id="containment-wrapper-2" class="questionContainer clearfix">
<div class="leftContainer">
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
</div>
<div class="rightContainer">
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 3
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 4
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 5
</div>
</div>
</div>
</div>
<div id="containment-wrapper-3" class="questionContainer clearfix">
<div class="leftContainer">
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
<div class="leftBox droppable"></div>
</div>
<div class="rightContainer">
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 1
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 2
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 3
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 4
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 5
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 6
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 7
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 8
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 9
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 10
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 11
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 12
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 13
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 14
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 15
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 16
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 17
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 18
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 19
</div>
</div>
<div class="rightBox droppable">
<div class="draggable ui-widget-content">
Drag me around 20
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
$(
function() {
var graphicsQuestion = ["containment-wrapper-1", "containment-wrapper-2", "containment-wrapper-3"];
for (var i=0; i<graphicsQuestion.length; i++) {
var graphicsQuestionIdSelector = "#" + graphicsQuestion[i];
var draggableOptionsInThisQuestion = $(graphicsQuestionIdSelector + " .draggable");
initializeGraphicsDraggable(draggableOptionsInThisQuestion, graphicsQuestionIdSelector); // set elements which can be dropped
}
initializeGraphicsDroppable($(".droppable")); // Not question specific, sets all areas where options can be dropped
}
);
function initializeGraphicsDraggable(elements, containerId){
elements.each(function() {
var cursorTop = $(this).height() / 2;
var cursorLeft = $(this).width() / 2;
$(this).draggable({
containment: containerId, // restricts movement within this container
scroll: true, // allows scroll with longer elements
scrollSensitivity: 20, // Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.
scrollSpeed: 5, // The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.
revert: "invalid", // revert back to source if valid droppable not found
cursor: "pointer", // set cursor to pointer when dragged
cursorAt: { top: cursorTop, left: cursorLeft }, // set cursor position to center when dragging
start: OnGraphicsDragStart, // event executed on drag start - (set higher z-index)
stop: OnGraphicsDragStop // event executed on drag end - (reset z-index)
});
});
}
function initializeGraphicsDroppable(elements){
elements.each(function() {
var content = $(this).html();
var disabled = content != "" && content != null;
$(this).droppable({
disabled: disabled, // disable the drop spot if no space to drop another element
drop: OnGraphicsDropSuccess, // event executed on successful drop of dragged element (save answer here for source and destination)
});
});
}
function OnGraphicsDragStart() {
$(this).css("z-index", 100);
}
function OnGraphicsDragStop() {
$(this).css("z-index", "");
}
function OnGraphicsDropSuccess( event, ui ) {
console.log("dragged from: ", ui.draggable.parent());
ui.draggable.parent().droppable( "option", "disabled", false ); // Enable droppable option on drag source, so that other elements can be dropped in empty location left
ui.draggable.detach().appendTo($(this)); // Remove drag element from drag source and attach to drag destination in DOM
ui.draggable.css({ "left": "0px", "right": "0px", "top": "0px", "bottom": "0px" }); // Remove style attribute from drag element set by Jquery UI, since we are moving its actual DOM location
ui.draggable.parent().droppable( "option", "disabled", true ); // Disable droppable option on drag destination, so that no more elements can be dropped here
console.log("dropped to: ", ui.draggable.parent());
return true;
}
/* Styles go here */
.questionContainer{width:70%;height:auto;border:2px solid #ccc;padding:10px;margin:10px}
.clearfix{clear:both}
.clearfix:after{clear:both;content:"";display:table}
.leftContainer{width:200px;float:left}
.rightContainer{width:200px;float:right}
.draggable{width:150px;height:30px;padding:9px;cursor:pointer}
.droppable{width:170px;height:50px}
.leftBox{border:1px solid grey;background:#fff;color:#333;margin:5px}
.rightBox{border:1px solid #00f;background:#fff;color:#333;margin:5px}