css move elemnt with touch

Solutions on MaxInterview for css move elemnt with touch by the best coders in the world

Search
showing results for - "css move elemnt with touch"
Ela
09 Jan 2021
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta name="viewport" 
6        content="width=device-width, 
7        initial-scale=1.0, 
8        user-scalable=no" />
9  <title>Drag/Drop/Bounce</title>
10  <style>
11    #container {
12      width: 100%;
13      height: 400px;
14      background-color: #333;
15      display: flex;
16      align-items: center;
17      justify-content: center;
18      overflow: hidden;
19      border-radius: 7px;
20      touch-action: none;
21    }
22    #item {
23      width: 100px;
24      height: 100px;
25      background-color: rgb(245, 230, 99);
26      border: 10px solid rgba(136, 136, 136, .5);
27      border-radius: 50%;
28      touch-action: none;
29      user-select: none;
30    }
31    #item:active {
32      background-color: rgba(168, 218, 220, 1.00);
33    }
34    #item:hover {
35      cursor: pointer;
36      border-width: 20px;
37    }
38  </style>
39</head>
40
41<body>
42
43  <div id="outerContainer">
44    <div id="container">
45      <div id="item">
46
47      </div>
48    </div>
49  </div>
50
51  <script>
52    var dragItem = document.querySelector("#item");
53    var container = document.querySelector("#container");
54
55    var active = false;
56    var currentX;
57    var currentY;
58    var initialX;
59    var initialY;
60    var xOffset = 0;
61    var yOffset = 0;
62
63    container.addEventListener("touchstart", dragStart, false);
64    container.addEventListener("touchend", dragEnd, false);
65    container.addEventListener("touchmove", drag, false);
66
67    container.addEventListener("mousedown", dragStart, false);
68    container.addEventListener("mouseup", dragEnd, false);
69    container.addEventListener("mousemove", drag, false);
70
71    function dragStart(e) {
72      if (e.type === "touchstart") {
73        initialX = e.touches[0].clientX - xOffset;
74        initialY = e.touches[0].clientY - yOffset;
75      } else {
76        initialX = e.clientX - xOffset;
77        initialY = e.clientY - yOffset;
78      }
79
80      if (e.target === dragItem) {
81        active = true;
82      }
83    }
84
85    function dragEnd(e) {
86      initialX = currentX;
87      initialY = currentY;
88
89      active = false;
90    }
91
92    function drag(e) {
93      if (active) {
94      
95        e.preventDefault();
96      
97        if (e.type === "touchmove") {
98          currentX = e.touches[0].clientX - initialX;
99          currentY = e.touches[0].clientY - initialY;
100        } else {
101          currentX = e.clientX - initialX;
102          currentY = e.clientY - initialY;
103        }
104
105        xOffset = currentX;
106        yOffset = currentY;
107
108        setTranslate(currentX, currentY, dragItem);
109      }
110    }
111
112    function setTranslate(xPos, yPos, el) {
113      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
114    }
115  </script>
116</body>
117
118</html>
source
similar questions
jquery click or touchjavascript canvas touchmove
queries leading to this page
drag div fast mouse movmentdifference bw offsety and client y for drag eventjavascript moveable event movedrag enter loos when mouse move fastnode js detect drag and drop globallyhold and drag javascriptdrag mousedown movement javascriptjavascript follow mouse drag eventxhtml code to drag image with mousehtml drag follow cursorjavascript drag mouse positionjava like drag and drop inside coordinateshow to show effect of line while dropping jsdroppable area with mouseup javascriptmouse drag javascriptdrag don 27t go outside drag javascriptjs mouse drag eventhow to drag any perticular div element in jsdragstart native html5 drag and drop horizontaljavascript draging objects with mousejavascript drag and drop highlight drag entermousemove event is not dragging to after certain extend difference between offset and page for drag eventdragstartnative html5 drag and drop horizontaljs touch drag eventmouse drag eventdrag listem items in text editor using javascripthow to make a mouse dragging in htmljavascript mouse drag event listenerdetect if mouse id dragged across while screendrag to confirm jqueryjavascript dragging objects with mousefit on drop javascriptdrag select javascript wrap aroundhow to check list is element is left or not after drag and drop in javascripthow to drag to top in javascriptjquery dragable in x direction in vanilla jsjs drag and clickhtml js drag image with mouselow to high drag button scripton mouse drag javascriptdragging objects in javascriptjavascript mouse drag coordinatesdrag items sometimes hidden html5 javascriptmove rows horizontally on mousemove slider jsgrabbing the dragable area in the bottom right of the editor interfacedrag a boll insede div in cssget mouse position while dragging event javascriptjavascript drag drop solutionpointer events node with drag and dropdrag div with mouse like windowhow to do drag motion javascriptaddeventlistener javascript drag and drop canvastrigger a function in javascript when mouse dragging occuresjavascript drop space dragtouch drag and drop javascripthow to drag and drop with positionhow to use drag and drop in javascriptclick and drap javascriptdrag drop javascript mousemovehandle mouse drag jsdrag and drop in the same div javascriptdrag and drop line javascriptjavascript mouse dragmouse drag verticaldragmousedown 3a function 28event 29 7bjavascript dragging slider call multipel timesmake html element drag to mouse locationhandlemouse down vs drag dropdrag event positiondrag and drop object moving jsremove dragged item current position and add another positionjavascript that will move mouse to element by classhow to get mouse drag element in javascripthow to move object with mouse in javascriptlisten to touch drag and drop eventhow to get mouse drag and drop coordinates in javascriptjs drag and drop live spacing elements draggable div javascript which where stop than there it will be fixedmouse drag event in jsjavascript drag current mosuemake div drop at cursorhow to drag object from mouse position canvasjavascript drag mouse followhtml code to drag images with mousehtml5 drag and drop mouse eventsjavascript get mouse position on dragmouse drag doesn 27t work jscan you add drag and click events javascriptclick here to move like drag javascriptdra and drop css sholud be only changed when mouse is on particular divjavascript touch drag eventball dragging into a container html css jsclick and drag x y javasctiptjs on mouse draghtml onmouse drag overjavascript click and draghow to add high low drag option using javascriptcursor event drag and drophow to make drag and drop in javascriptjavascript when drag mousehow to drag a image to mouse and size incres decres in javascripthow to attach an element to the pointer in html like draggable elementhtml drag equivalent to mouse outjavascript click and drag to move viewhow to drag an element in javascript without cclipping the element in original positionhow to allow drag and drop in one direction javascriptxhtml code to drag images with mouseball dragging js cssjavascript drag and drop logichtml dragging get mouse positionmouse event drag vertical onlyhow to handle drag item move to anywhere javascriupt angular 10javascript mouse hold drag smoothmouse event drag right 20 pixelsslider drag move eventjs drag and drop cursore tutohow to drag and drop in javascriptjs mouse draggingjs drag hold over 1 sechow much drag javascriptball dragging into a square html css jsthe joystick button isn 27t draggable for mobile did anything go wrong 3f climbingdrag item if mouse on placepointer events drag and dropmousemove event is not dragging to after certain extend in javascript user drag with jsmouse dragjs drap and hold overget mouse position on drop javascriptclick perticular area to drag whole elementdrag and drop of image using mouseup 2c mousedownmouse drag and drop eventdrag and drop example through touch eventjavascript touch event drag and drophow to drag an object using mousemove event javascriptcss move elemnt with touch