drag and drop and touch event using vanilla javascript

Solutions on MaxInterview for drag and drop and touch event using vanilla javascript by the best coders in the world

Search
showing results for - "drag and drop and touch event using vanilla javascript"
Abigail
11 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
drag drop image json drop 2c drag 2c dragover eventjavascript drag and drop listjavascript touch scroll eventjavascript canvas touchmovecreate an all day event by drag and dropinteraction js drag anddrop
queries leading to this page
javascript follow mouse drag eventhow to drag a image to mouse and size incres decres in javascriptmove rows horizontally on mousemove slider jsdrag select javascript wrap aroundnode js detect drag and drop globallyhow much drag javascriptfit on drop javascripthow to drag to top in javascriptjs drag and drop live spacing elements drag div fast mouse movmentmouse drag eventdragging objects in javascripthow to show effect of line while dropping jshtml code to drag images with mousejs drag and clickdifference between offset and page for drag eventhandle mouse drag jsjquery dragable in x direction in vanilla jsxhtml code to drag image with mousejavascript click and dragjavascript drag mouse followclick perticular area to drag whole elementgrabbing the dragable area in the bottom right of the editor interfacedrag and drop line javascriptlow to high drag button scriptjavascript mouse dragdra and drop css sholud be only changed when mouse is on particular divjavascript mouse drag coordinateshow to drag an object using mousemove event javascriptclick and drag x y javasctiptjs mouse drag eventdraggable div javascript which where stop than there it will be fixedhow to do drag motion javascripthtml5 drag and drop mouse eventsaddeventlistener javascript drag and drop canvasjavascript moveable event moveclick here to move like drag javascripthow to drag and drop in javascripthow to make a mouse dragging in htmlmouse drag javascriptjavascript click and drag to move viewclick and drap javascriptjavascript drag current mosuehow to make drag and drop in javascriptdrag drop javascript mousemovemouse drag doesn 27t work jsdrag and drop example through touch eventjavascript drag mouse positionjavascript dragging slider call multipel timesjs on mouse draghow to get mouse drag and drop coordinates in javascriptjavascript mouse drag event listenerdragmousedown 3a function 28event 29 7bhtml onmouse drag overcan you add drag and click events javascripthtml js drag image with mousejavascript that will move mouse to element by classremove dragged item current position and add another positionmousemove event is not dragging to after certain extend in javascript touch drag and drop javascripthtml drag equivalent to mouse outuser drag with jspointer events node with drag and dropslider drag move eventhow to drag any perticular div element in jsjavascript mouse hold drag smoothdrag item if mouse on placedrag and drop of image using mouseup 2c mousedownmouse drag and drop eventtrigger a function in javascript when mouse dragging occureshow to move object with mouse in javascriptjavascript drop space draghow to drag an element in javascript without cclipping the element in original positionhow to add high low drag option using javascriptball dragging into a square html css jsjavascript draging objects with mouseget mouse position on drop javascriptball dragging into a container html css jsmouse event drag right 20 pixelsdrag to confirm jqueryjs drag hold over 1 secjava like drag and drop inside coordinatesjs touch drag eventdragstartnative html5 drag and drop horizontalxhtml code to drag images with mousedrag items sometimes hidden html5 javascriptmousemove event is not dragging to after certain extend html dragging get mouse positionhtml drag follow cursorhow to drag object from mouse position canvasjs drag and drop cursore tutomouse dragdetect if mouse id dragged across while screenmouse drag event in jsmake html element drag to mouse locationmake div drop at cursoron mouse drag javascriptjavascript touch drag eventget mouse position while dragging event javascriptjavascript dragging objects with mousehow to use drag and drop in javascriptdrag don 27t go outside drag javascripthow to get mouse drag element in javascriptmouse drag verticaldifference bw offsety and client y for drag eventdragstart native html5 drag and drop horizontalpointer events drag and dropdrag a boll insede div in cssjavascript drag drop solutiondroppable area with mouseup javascriptjs mouse draggingdrag mousedown movement javascriptjs drap and hold overmouse event drag vertical onlythe joystick button isn 27t draggable for mobile did anything go wrong 3f climbingdrag event positionball dragging js cssdrag div with mouse like windowhow to allow drag and drop in one direction javascripthow to drag and drop with positionhow to check list is element is left or not after drag and drop in javascripthold and drag javascripthandlemouse down vs drag drophow to handle drag item move to anywhere javascriupt angular 10javascript drag and drop highlight drag enterdrag listem items in text editor using javascriptjavascript when drag mousecursor event drag and drophow to attach an element to the pointer in html like draggable elementdrag and drop in the same div javascriptdrag enter loos when mouse move fastdrag and drop object moving jsjavascript drag and drop logicdrag and drop and touch event using vanilla javascript