Skip to content

X
xblock-drag-and-drop-v2
Commit 159bf51b by Braden MacDonald
Options

CSS tweaks to make fixed draggable sizing more accurate

parent c5f79224
Showing with 4 additions and 2 deletions
drag_and_drop_v2/public/css/drag_and_drop.css
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 0; /* padding: 5px looks better but makes some blocks to change in size when dropped onto the target; */
} }
.xblock--drag-and-drop .drag-container .option { .xblock--drag-and-drop .drag-container .option {
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
max-width: calc(100% / 3 - 1% - 1% - 20px); max-width: calc(100% / 3 - 1% - 1% - 20px);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box;
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
background-color: #1d5280; background-color: #1d5280;
...@@ -122,11 +123,12 @@ ...@@ -122,11 +123,12 @@
outline-offset: -4px; outline-offset: -4px;
} }
.xblock--drag-and-drop .drag-container .ui-draggable-dragging { .xblock--drag-and-drop .drag-container .ui-draggable-dragging.option {
box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3);
border: 1px solid #ccc; border: 1px solid #ccc;
opacity: .65; opacity: .65;
z-index: 20 !important; z-index: 20 !important;
margin: 0; /* Allow the draggable to touch the edges of the target image */
} }
.xblock--drag-and-drop .drag-container .option img { .xblock--drag-and-drop .drag-container .option img {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment