A Pen by Konstantinos Tsatsarounos on CodePen.
Created
February 10, 2016 22:11
-
-
Save konstantinos-tsatsarounos/29f506a0ef300b0e6c36 to your computer and use it in GitHub Desktop.
Drag & Drop with dynamic list
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
| <button id="create-element">Create Draggable</button> | |
| <section id="wrapper"> | |
| <!-- Area in which the draggable element get into --> | |
| <div class="container dropable" dropzone="link"> | |
| </div> | |
| <!-- Area with draggable items --> | |
| <div class="container draggable"> | |
| </div> | |
| </section> |
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(){ | |
| //Create global variables | |
| var createdElements = []; | |
| var selectedElements = []; | |
| var current; | |
| /* | |
| Set event listener for the button | |
| if the button is clicked adds an extra object to the createElements array | |
| */ | |
| _$('#create-element').addEventListener('click', function(evt){ | |
| var buttonObject = { | |
| "id": createdElements.length, | |
| "name": "Element " + createdElements.length | |
| }; | |
| createdElements.push(buttonObject); | |
| createElement(buttonObject, _$('.draggable')[0]); | |
| }); | |
| //Set the listeners for the DragDrop Events | |
| _$('.dropable', true).addEventListener('dragover', function(evt){ | |
| evt.preventDefault(); | |
| }); | |
| _$('.draggable', true).addEventListener('dragstart', function(evt){ | |
| current = evt.target.id.replace("-element", ""); | |
| }); | |
| /* | |
| Set event listener for the button | |
| if something falls into, creates a new element and populates the selectedElements array | |
| */ | |
| _$('.dropable', true).addEventListener('drop', function(evt){ | |
| evt.preventDefault(); | |
| var data = current; | |
| loadElement(current); | |
| return false; | |
| }); | |
| //Alias for the document querySelector | |
| function _$(selector, first){ | |
| if((selector.indexOf('#') > -1) || first){ | |
| return document.querySelector(selector); | |
| } | |
| return document.querySelectorAll(selector); | |
| } | |
| //Creates a draggable element | |
| function createElement(obj, parent){ | |
| var elem = document.createElement('div'); | |
| elem.setAttribute('id', createdElements.length + "-element"); | |
| elem.setAttribute('draggable', "true"); | |
| elem.innerHTML = obj.name || "draggable element"; | |
| parent.appendChild(elem); | |
| } | |
| //loads a selected element | |
| function loadElement(id){ | |
| selectedElements.push(id); | |
| createElement(createdElements[id - 1], _$('.dropable')[0]); | |
| } | |
| }()); |
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
| .transit { | |
| transition: background-color 300ms ease-in-out; | |
| } | |
| html { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| } | |
| button { | |
| padding: 1em 2em; | |
| background-color: lightgray; | |
| border: 2px solid #b2b2b2; | |
| font-weight: bold; | |
| font-size: 120%; | |
| cursor: pointer; | |
| @extend .transit; | |
| } | |
| button:hover, | |
| button:active, | |
| button:focus { | |
| background-color: #a7a7a7; | |
| } | |
| #create-element { | |
| } | |
| #wrapper { | |
| margin-top: 2em; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| height: 500px; | |
| width: 100%; | |
| .container { | |
| width: 500px; | |
| height: 100%; | |
| > div { | |
| box-sizing: border-box; | |
| padding: 1.5em .5em; | |
| width: 100%; | |
| height: 80px; | |
| line-height: 36px; | |
| border-bottom: 2px solid #708b97; | |
| cursor: pointer; | |
| @extend .transit; | |
| &:hover { | |
| background-color: rgba(0,0,0,.3); | |
| } | |
| } | |
| } | |
| .draggable { | |
| background-color: lightblue; | |
| } | |
| .dropable { | |
| background-color: lightpink; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment