A Pen by Michelle Wuebben on CodePen.
Created
May 6, 2019 13:48
-
-
Save MissWibbon/80bc63a3ceb8991d79ea811ed238a7cf to your computer and use it in GitHub Desktop.
drag & drop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <p style="color: white; text-align: center; font-family: helvetica;">Drag any element into one of the boxes.</p> | |
| <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| <div class="row" style="width: 100%; margin: auto;"> | |
| <div id="col" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| <div id="col" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| <div id="col" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="dragData"> | |
| <img id="drag1" src="https://www.iconsdb.com/icons/preview/orange/bird-2-xxl.png" draggable="true" ondragstart="drag(event)" style="width: 10%;"> | |
| <div class="w-delete-outer"><div class="w-delete"></div></div> | |
| </div> | |
| <div class="dragData"> | |
| <textarea id="drag2" draggable="true" ondragstart="drag(event)"></textarea> | |
| </div> | |
| <div class="dragData"> | |
| <h1 id="drag3" style="display: inline-block;" draggable="true" ondragstart="drag(event)">Drag Me</h1> | |
| </div> | |
| <div class="dragData"> | |
| <button type="button" id="drag4" draggable="true" ondragstart="drag(event)">Buttons</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function allowDrop(ev) { | |
| ev.preventDefault(); | |
| } | |
| function drag(ev) { | |
| ev.dataTransfer.setData("text", ev.target.id); | |
| } | |
| function drop(ev) { | |
| ev.preventDefault(); | |
| var data = ev.dataTransfer.getData("text"); | |
| ev.target.appendChild(document.getElementById(data)); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #div1 { | |
| width: 100%; | |
| height: auto; | |
| padding: 10px; | |
| border: 1px solid #aaaaaa; | |
| background-color: #eee; | |
| margin: 5px; | |
| } | |
| #col { | |
| border: 1px solid #aaaaaa; | |
| width: 30%; | |
| padding: 10px; | |
| height: auto; | |
| display: inline-block; | |
| background-color: #eee; | |
| } | |
| button { | |
| margin: 5px; | |
| padding: 5px; | |
| border-radius: 10px; | |
| background-color: yellow; | |
| cursor: move; | |
| } | |
| body { | |
| background-color: #333; | |
| width: 85%; | |
| margin: auto; | |
| } | |
| h1 { | |
| color: white; | |
| font-family: helvetica; | |
| } | |
| .dragData{ | |
| cursor: move; | |
| display: inline; | |
| } | |
| .weebly-content-area .inside.inside-delete-hover>.w-element-controls .w-upgrade,.weebly-content-area .inside.inside-delete-hover>.w-element-controls .w-move,.weebly-content-area .inside.inside-delete-hover>.w-element-controls .w-handle,.weebly-content-area .inside.inside-delete-active>.w-element-controls .w-upgrade,.weebly-content-area .inside.inside-delete-active>.w-element-controls .w-move,.weebly-content-area .inside.inside-delete-active>.w-element-controls .w-handle { | |
| display: none | |
| } | |
| .w-delete-outer { | |
| position: absolute; | |
| top: -13px; | |
| right: -13px; | |
| padding: 5px 5px 10px 10px; | |
| } | |
| .w-delete { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 2px; | |
| border: 1px solid #88ceff; | |
| background-color: #fff; | |
| background-repeat: no-repeat; | |
| cursor: pointer; | |
| transition: background-color 0.1s ease-in,border-color 0.1s ease-in; | |
| background-image: url(../sprites/editor/elements/controls/icons-s16342f837d.png); | |
| background-position: 0 -90px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment