diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index ea100e072f..1aafa0591c 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -27,6 +27,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.iconWidth * 0.5
+ - state.currentMovingDraggable.iconElLeftOffset
);
state.currentMovingDraggable.iconEl.css(
'top',
@@ -41,6 +42,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
+ - 9 // Account for padding, border.
);
state.currentMovingDraggable.labelEl.css(
'top',
@@ -84,7 +86,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.appendTo(state.sliderEl);
if (obj.icon.length > 0) {
- draggableObj.hasIcon = true;
+ draggableObj.iconElBGColor = 'transparent';
+ draggableObj.iconElPadding = 0;
+ draggableObj.iconElBorder = 'none';
+ draggableObj.iconElLeftOffset = 0;
draggableObj.iconEl = $('');
draggableObj.iconEl.attr(
@@ -173,6 +178,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// icon. All the existing code will work, and the user will
// see a label instead of an icon.
if (obj.label.length > 0) {
+ draggableObj.iconElBGColor = 'yellow';
+ draggableObj.iconElPadding = 8;
+ draggableObj.iconElBorder = '1px solid black';
+ draggableObj.iconElLeftOffset = 9;
+
draggableObj.iconEl = $(
'