├── license.txt
├── README.md
├── draggin.min.js
└── draggin.js


/license.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Christopher Nunes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Draggin.js
 2 | A fully multi-platform Javascript library for quickly and easily creating interactive user interfaces.
 3 | ## [DEMO](https://draggin.surge.sh)
 4 | ## Inspiration
 5 | This project was created with simplicity and abstraction in mind. Draggin.js is the first complete drag and drop library that you can use without writing a single line of Javascript. I wanted a library that I could use with ease, instead of spending extra time configuring a heavy library.
 6 | ## Features
 7 | - *SERIOUSLY* Lightweight (2.5kb when compressed)
 8 | - **Fully** touch compatible
 9 | - No need to write Javascript code
10 | - Once included, is **instantly** usable
11 | - Editable text!
12 | - Leverages GPU for increased performance
13 | - ***ZERO DEPENDENCIES***
14 |      - Written in vanilla Javascript
15 |      - No extraneous CSS or JS needed
16 | ## Get Started
17 | To use the script, simply include it in your webpage in a ```<script>``` tag:
18 | ```
19 | <script type="text/javascript" src="https://chrisnunes.net/draggin.js"></script>
20 | ```
21 | ### OR
22 | 
23 | Download the draggin.min.js file from this repository and include it in your webpage:
24 | ```
25 | <script type="text/javascript" src="draggin.min.js"></script>
26 | ```
27 | ## Usage
28 | Draggin.js is designed with simplicity in mind. Once you have included the script in your page, all you have to do is render an element and give it a class of "draggable."
29 | ```
30 | <h1 class="draggable">Hello, World!</h1>
31 | ```
32 | To use the editable text that is part of Draggin.js, use any text element and give it a class of "text.
33 | ```
34 | <h1 class="text">Hello, World!</h1>
35 | <p class="text">Hello, World!</p>
36 | <a href="#" class="text">Hello, World!</a>
37 | <div class="text">Hello, World!</div>
38 | ```
39 | All of the above are valid examples of editable text. You can also combine both classes for the intended experience. 
40 | Simply click once to drag elements, and double click to edit text.
41 | ```
42 | <h1 class="draggable text">Both tags work at the same time!</h1>
43 | ```
44 | ## Future Developments
45 | - React.js Port 
46 | - Resizable Elements
47 | - Elements change position when screen resizes
48 | 
49 | Special thanks to **BrowserStack** for testing tools
50 | 
51 | ![BrowserStack](https://i1.wp.com/www.diogonunes.com/blog/wp-content/uploads/2016/07/browserstack-logo.png?resize=210%2C69 "Special thanks to *BrowserStack* for testing tools")
52 | 
53 | 


--------------------------------------------------------------------------------
/draggin.min.js:
--------------------------------------------------------------------------------
1 | document.body.onload=function(){var e=".draggable{cursor: move;display: inline-block;} .text{display: inline-block; cursor: move;} .text:focus{cursor: auto;} .text-wrapper{width: 100%;position: relative;} .wrap{position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}';",t=document.createElement("style");t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(t);var n,o,i=document.querySelectorAll(".draggable"),a=document.querySelectorAll(".text");z=1,editing=!1;var r=null;function s(e){event.target.classList.contains("text")||(editing=!1,editing&&n.blur())}document.body.addEventListener("mousedown",s),document.body.addEventListener("touchstart",s);for(var d=0;d<i.length;d++)i[d].addEventListener("mousedown",c),i[d].addEventListener("touchstart",f),b=i[d].getBoundingClientRect(),i[d].initialOffsetX=b.left+window.pageXOffset,i[d].initialOffsetY=b.top+window.pageYOffset,i[d].x=b.left,i[d].y=b.top,i[d].style.cursor="move",document.addEventListener("mouseup",g),document.addEventListener("touchend",g);for(let e=0;e<a.length;e++){var l;a[e].addEventListener("dblclick",u),(l=document.createElement("div")).className="text-wrapper",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),l.style.height=p(a[e])+"px",(l=document.createElement("div")).className="wrap",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),a[e].contentEditable="true"}function u(e){n=e.target,editing=!0,n.focus()}function f(e){e.preventDefault(),c(e),null==r?r=setTimeout(function(){r=null},500):(clearTimeout(r),r=null,u(e))}function c(e){if(e.target.classList.contains("text")||(editing=!1,editing&&n.blur()),!editing){e.preventDefault(),moving=!0,z+=1,(o=e.target).attributeName="test",b=o.getBoundingClientRect();var t=b.left+window.pageXOffset,i=b.top+window.pageYOffset;offsetX=e.pageX||e.changedTouches[0].pageX,offsetY=e.pageY||e.changedTouches[0].pageY,document.addEventListener("mousemove",function(e){if(!0===moving){var n="transform: translate("+(e.pageX-offsetX+t-o.initialOffsetX)+"px, "+(e.pageY-offsetY+i-o.initialOffsetY)+"px);z-index:"+z+";";o.setAttribute("style",n)}}),document.addEventListener("touchmove",function(e){var n=e.changedTouches;if(!0===moving)for(let e=0;e<n.length;e++){var a="transform: translate("+(n[e].pageX-offsetX+t-o.initialOffsetX)+"px, "+(n[e].pageY-offsetY+i-o.initialOffsetY)+"px);z-index:"+z+";";o.setAttribute("style",a)}})}}function g(e){moving=!1}function p(e){var t=e.offsetHeight,n=getComputedStyle(e);return t+=parseInt(n.marginTop)+parseInt(n.marginBottom)}};
2 | 


--------------------------------------------------------------------------------
/draggin.js:
--------------------------------------------------------------------------------
  1 | document.body.onload = function(){
  2 |     //Apply some basic styles
  3 |     var css = ".draggable{cursor: move;display: inline-block;} .text{display: inline-block; cursor: move;} .text:focus{cursor: auto;} .text-wrapper{width: 100%;position: relative;} .wrap{position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}';";
  4 |     var style = document.createElement('style');
  5 |     if (style.styleSheet) {
  6 |         style.styleSheet.cssText = css;
  7 |     } else {
  8 |         style.appendChild(document.createTextNode(css));
  9 |     }
 10 |     document.getElementsByTagName('head')[0].appendChild(style);
 11 | 
 12 |     // Select all elements with the 'draggable' class and stores them in the 'elements' variable
 13 |     var elements = document.querySelectorAll(".draggable");
 14 | 
 15 |     // Creates an additional array of all text elements
 16 |     var texts = document.querySelectorAll(".text");
 17 | 
 18 |     // Variable to store z index of last moved element
 19 |     z = 1;
 20 | 
 21 |     // Variable to store if you are currently editing text
 22 |     editing = false;
 23 | 
 24 |     // Stores the last edited text element
 25 |     var editedText;
 26 | 
 27 |     // Stores the last edited element
 28 |     var tgt;
 29 | 
 30 |     var clickTimer = null;
 31 | 
 32 |     // Adds the mousedown listener on the body element, to listen for when you click away from an element
 33 |     document.body.addEventListener('mousedown', cancel);
 34 |     document.body.addEventListener('touchstart', cancel);
 35 | 
 36 |     // Stops editing text when you click away from it
 37 |     function cancel(evt){
 38 |         // If the element clicked on is not text
 39 |         if(!event.target.classList.contains("text")){
 40 |           editing = false;
 41 |           // Else, exit out of the edited text
 42 |           if(editing){
 43 |             editedText.blur();
 44 |           }
 45 |         }
 46 |     }
 47 | 
 48 |     // Adds event listeners to every element that has the draggable class
 49 |     for(var i = 0; i < elements.length; i++){
 50 |       elements[i].addEventListener('mousedown', drag);
 51 |         elements[i].addEventListener('touchstart', handleTouch);
 52 |         b = elements[i].getBoundingClientRect();
 53 |         // Calculate the initial offset of the element from the top left of the page and stores it as a property of the element
 54 |         elements[i].initialOffsetX = b.left + window.pageXOffset;
 55 |         elements[i].initialOffsetY = b.top + window.pageYOffset;
 56 |         elements[i].x = b.left;
 57 |         elements[i].y = b.top;
 58 |         elements[i].style.cursor = "move";
 59 |       document.addEventListener('mouseup', end);
 60 |         document.addEventListener('touchend', end);
 61 |     };
 62 | 
 63 |     // Adds a mouse event for a doubleclick on the text element and wraps text element in divs
 64 |     for(let i = 0; i < texts.length; i++){
 65 |         texts[i].addEventListener("dblclick", editText);
 66 |         var div = document.createElement("div");
 67 |         div.className = "text-wrapper";
 68 |         var parent = texts[i].parentNode;
 69 |         parent.insertBefore(div,texts[i]);
 70 |         div.appendChild(texts[i]);
 71 |         div.style.height = outerHeight(texts[i])+"px";
 72 |         var div = document.createElement("div");
 73 |         div.className = "wrap";
 74 |         var parent = texts[i].parentNode;
 75 |         parent.insertBefore(div,texts[i]);
 76 |         div.appendChild(texts[i]);
 77 |         // Lets you edit text
 78 |         texts[i].contentEditable = "true";
 79 |     }
 80 | 
 81 |     // Focuses on the text element
 82 |     function editText(evt){
 83 |         editedText = evt.target;
 84 |         editing = true;
 85 |         editedText.focus();
 86 |     }
 87 |     function handleTouch(evt){
 88 |         evt.preventDefault();
 89 |         drag(evt);
 90 |         if (clickTimer == null) {
 91 |             clickTimer = setTimeout(function () {
 92 |                 clickTimer = null;
 93 |             }, 500)
 94 |         } else {
 95 |             clearTimeout(clickTimer);
 96 |             clickTimer = null;
 97 |             editText(evt);
 98 |         }
 99 |     }
100 | 
101 |     // Main logic, called when the mouse is clicked
102 |     function drag(event) {
103 |       // If the targeted element is not text
104 |       if(!event.target.classList.contains("text")){
105 |           // Set editing to false and lose focus on the text field
106 |           editing = false;
107 |           if(editing){
108 |             editedText.blur();
109 |           }
110 |       }
111 | 
112 |       // If you are not clicking on a text element that is currently being edited
113 |       if(!editing){
114 |           // Prevent default behavior and increase z index to bring the new element to the front
115 |           event.preventDefault();
116 |           moving = true;
117 |           z = z+1;
118 | 
119 |           // Identify which element was clicked and store in the 'tgt' element, then get position properties of it
120 |           tgt = event.target;
121 |           tgt.attributeName = 'test';
122 |           b = tgt.getBoundingClientRect();
123 |           var x = b.left + window.pageXOffset;
124 |           var y = b.top + window.pageYOffset;
125 |           offsetX = event.pageX || event.changedTouches[0].pageX;
126 |           offsetY = event.pageY || event.changedTouches[0].pageY;
127 | 
128 |           document.addEventListener('mousemove',function(e) {
129 |             // If the page has been clicked and an element is being dragged
130 |             if(moving === true){
131 |               // Calculate the new position of the element, relative to the top left of the page
132 |               var dx = e.pageX - offsetX + x - tgt.initialOffsetX;
133 |               var dy = e.pageY - offsetY + y - tgt.initialOffsetY;
134 |               // Apply the styles to the element
135 |               var position = 'transform: translate('+dx+'px, '+dy+'px);z-index:'+z+';';
136 |               tgt.setAttribute('style', position);
137 |             };
138 |           });
139 |           document.addEventListener('touchmove',function(e) {
140 |               var touches = e.changedTouches;
141 |             // If the page has been clicked and an element is being dragged
142 |             if(moving === true){
143 |               for(let i = 0; i < touches.length; i++){
144 |                   // Calculate the new position of the element, relative to the top left of the page
145 |                   var dx = touches[i].pageX - offsetX + x - tgt.initialOffsetX;
146 |                   var dy = touches[i].pageY - offsetY + y - tgt.initialOffsetY;
147 |                   // Apply the styles to the element
148 |                   var position = 'transform: translate('+dx+'px, '+dy+'px);z-index:'+z+';';
149 |                   tgt.setAttribute('style', position);
150 |               }
151 |             };
152 |           });
153 |       }
154 |     };
155 | 
156 |     function end(evt) {
157 |       // When the mouse is lifted up, set moving to false
158 |       moving = false;
159 |     };
160 | 
161 |     function outerHeight(el) {
162 |       var height = el.offsetHeight;
163 |       var style = getComputedStyle(el);
164 | 
165 |       height += parseInt(style.marginTop) + parseInt(style.marginBottom);
166 |       return height;
167 |     }
168 | }
169 | 


--------------------------------------------------------------------------------