Similar to iPhone slide to unlock. Using pure javascript to drag an object for devices with and without touch support
A Pen by JunesiPhone on CodePen.
-
-
Save califat/75e7c51eb76847e802e988e15509ff5b to your computer and use it in GitHub Desktop.
Pure javascript draggable div (Touch and Mouse supported)
This file contains 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
| <!--http://JunesiPhone.com--> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="slider" ><div id="inner">➟</div></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| var getEL = function(el) { | |
| return document.getElementById(el); | |
| }; | |
| var acceptsTouch = function() { | |
| return 'ontouchstart' in document.documentElement; | |
| }; | |
| function getStyle(oElm, strCssRule){ | |
| var strValue = ""; | |
| if(document.defaultView && document.defaultView.getComputedStyle){ | |
| strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); | |
| } | |
| else if(oElm.currentStyle){ | |
| strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ | |
| return p1.toUpperCase(); | |
| }); | |
| strValue = oElm.currentStyle[strCssRule]; | |
| } | |
| return strValue; | |
| } | |
| var drag = function() { | |
| return { | |
| move: function(div, xpos, ypos) { | |
| div.style.left = xpos + "px"; | |
| //div.style.top = ypos + "px"; //not moving y axis in this case | |
| }, | |
| startMoving: function(div, container, evt) { | |
| evt = evt || window.event; | |
| var posX = ((acceptsTouch()) ? evt.touches[0].clientX : evt.clientX), | |
| posY = ((acceptsTouch()) ? evt.touches[0].clientY : evt.clientY), | |
| divTop = div.style.top.replace('px', ''), | |
| divLeft = div.style.left.replace('px', ''), | |
| offsetX = posX - divLeft, | |
| offsetY = posY - divTop; | |
| if (acceptsTouch()) { | |
| document.ontouchmove = function(evt) { | |
| evt.preventDefault(); | |
| evt = evt || window.event; | |
| var posX = evt.touches[0].clientX, | |
| posY = evt.touches[0].clientY, | |
| cWidth = getStyle(getEL('container'),'width').replace('px',''), | |
| dWidth = getStyle(getEL('slider'),'width').replace('px',''), | |
| finalX = posX - offsetX, | |
| finalY = posY - offsetY; | |
| if (finalX < 0) {finalX = 0;} | |
| if (finalY < 0) {finalY = 0;} | |
| if(finalX <= cWidth - dWidth - 8){ | |
| drag.move(div, finalX, finalY); | |
| } | |
| }; | |
| } else { | |
| document.onmousemove = function(evt) { | |
| evt.preventDefault(); | |
| evt = evt || window.event; | |
| var posX = evt.clientX, | |
| posY = evt.clientY, | |
| cWidth = getStyle(getEL('container'),'width').replace('px',''), //container width | |
| dWidth = getStyle(getEL('slider'),'width').replace('px',''), //slider width | |
| finalX = posX - offsetX, | |
| finalY = posY - offsetY; | |
| if (finalX < 0) {finalX = 0;} | |
| if (finalY < 0) {finalY = 0;} | |
| if(finalX <= cWidth - dWidth - 8){ | |
| drag.move(div, finalX, finalY); | |
| } | |
| }; | |
| } | |
| }, | |
| stopMoving: function(div, container, evt) { | |
| if (acceptsTouch()) { | |
| //evt.changedTouches[0].clientX | |
| div.style.left = "3px"; | |
| } else { | |
| document.getElementById(container).style.cursor = 'default'; | |
| document.onmousemove = function() {}; | |
| //evt.clientX | |
| div.style.left="3px"; | |
| } | |
| }, | |
| }; | |
| }(); | |
| (function(){ | |
| var el = getEL("slider"); | |
| if (acceptsTouch()) { | |
| el.addEventListener('touchstart', function(e) { | |
| drag.startMoving(this, 'container', event); | |
| }, false); | |
| el.addEventListener('touchend', function(e) { | |
| drag.stopMoving(this, 'container', event); | |
| }, false); | |
| } else { | |
| el.addEventListener('mousedown', function(e) { | |
| drag.startMoving(this, 'container', event); | |
| }, false); | |
| el.addEventListener('mouseup', function(e) { | |
| drag.stopMoving(this, 'container', event); | |
| }, false); | |
| } | |
| })(); |
This file contains 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
| #container{ | |
| position: absolute; | |
| top:140px; | |
| left:5px; | |
| width: 500px; | |
| height: 100px; | |
| background-color:rgba(0,0,0,0.5); | |
| border: 1px solid rgba(0,0,0,1); | |
| border-radius: 10px; | |
| } | |
| #slider{ | |
| border: 1px solid rgba(255,255,255,0.2); | |
| position: absolute; | |
| background-color: green; | |
| width:140px;height:90px;top:3px;left:3px;border-radius:10px; | |
| } | |
| #inner{ | |
| margin-left:55px; | |
| line-height:100px; | |
| font-size: 90px; | |
| color:rgba(0,0,0,0.5); | |
| text-shadow: 1px 1px rgba(255,255,255,0.2); | |
| } | |
| html{background:gray;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment