Search
showing results for - "javascript mouse drag coordinates"
Milan
06 Aug 2017
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
how to make move able triangle in canvas jshow to get mouse coordinates in javascripthow to get mouse x and y in javascriptclick right mouse javascriptchange the mouse pointer javascriptmouse coordinates not match with canvas coordinatehow to move an element to the cursor in javascriptget x y z position of mouse javascriptjavascript track mouse positionjavascript onclick select coordinatesjs mouse move activatejavascript get cursor position without eventmove canvas element to mouseaccess mouse position javascriptjs mouse position relative to elementjavascript canvas mousemovejavascript track mouse pointermouse coordinates not math with canvas coordinates in js
queries leading to this page
how to drag any perticular div element in jstrigger a function in javascript when mouse dragging occuresdrag mousedown movement javascriptgrabbing the dragable area in the bottom right of the editor interfacepointer events node with drag and dropmouse drag doesn 27t work jshtml5 drag and drop mouse eventsjs drag and drop cursore tutodrag enter loos when mouse move fastmouse drag verticaljavascript click and draghtml js drag image with mousemousemove event is not dragging to after certain extend in javascript jquery dragable in x direction in vanilla jsdraggable div javascript which where stop than there it will be fixedjavascript that will move mouse to element by classdra and drop css sholud be only changed when mouse is on particular divjavascript drag drop solutionhow to drag and drop in javascriptcan you add drag and click events javascriptdragmousedown 3a function 28event 29 7bball dragging into a square html css jshow to show effect of line while dropping jsjavascript drag mouse positionjs drag and clickuser drag with jsjavascript mouse drag coordinatesxhtml code to drag image with mousemouse drag javascriptjavascript get mouse position on dragmake html element drag to mouse locationhow to get mouse drag element in javascriptjavascript touch drag eventjs drag and drop live spacing elements javascript mouse hold drag smoothclick and drap javascripthtml code to drag images with mousejavascript drag and drop highlight drag enterjavascript drop space dragdrag item if mouse on placejavascript when drag mousemouse drag eventmousemove event is not dragging to after certain extend droppable area with mouseup javascripthow to drag object from mouse position canvasjs on mouse dragjs drag hold over 1 secdetect if mouse id dragged across while screenjavascript draging objects with mousedragstartnative html5 drag and drop horizontaldrag and drop line javascripthold and drag javascriptdrag don 27t go outside drag javascriptfit on drop javascriptget mouse position while dragging event javascriptslider drag move eventmouse drag and drop eventdrag and drop in the same div javascriptclick perticular area to drag whole elementjs drap and hold overthe joystick button isn 27t draggable for mobile did anything go wrong 3f climbingdifference bw offsety and client y for drag eventhtml dragging get mouse positiondrag listem items in text editor using javascriptremove dragged item current position and add another positionhow to drag a image to mouse and size incres decres in javascripthandle mouse drag jsjavascript follow mouse drag eventmove rows horizontally on mousemove slider jsmake div drop at cursordrag drop javascript mousemoveball dragging js cssjavascript dragging slider call multipel timeshtml drag follow cursorhow to allow drag and drop in one direction javascriptpointer events drag and dropdrag and drop of image using mouseup 2c mousedownhow to make drag and drop in javascriptlow to high drag button scriptjs mouse dragginghtml drag equivalent to mouse outdrag and drop object moving jsdifference between offset and page for drag eventhow to drag an object using mousemove event javascriptclick and drag x y javasctipthow to handle drag item move to anywhere javascriupt angular 10mouse drag event in jsjavascript moveable event movejs mouse drag eventcursor event drag and drophow to drag to top in javascriptmouse event drag right 20 pixelshow to check list is element is left or not after drag and drop in javascripthandlemouse down vs drag dropdrag event positionjavascript drag and drop logichow to move object with mouse in javascripthtml onmouse drag overjavascript touch event drag and dropjavascript dragging objects with mousejavascript drag mouse followon mouse drag javascripthow to attach an element to the pointer in html like draggable elementlisten to touch drag and drop eventdrag select javascript wrap aroundjavascript mouse dragmouse event drag vertical onlyball dragging into a container html css jsjava like drag and drop inside coordinatesdragging objects in javascriptdrag div fast mouse movmentdrag items sometimes hidden html5 javascriptdragstart native html5 drag and drop horizontaljs touch drag eventclick here to move like drag javascriptdrag div with mouse like windowhow much drag javascriptdrag and drop example through touch eventjavascript click and drag to move viewnode js detect drag and drop globallyaddeventlistener javascript drag and drop canvashow to drag an element in javascript without cclipping the element in original positionhow to drag and drop with positionjavascript drag current mosuejavascript mouse drag event listenerhow to use drag and drop in javascriptmouse dragget mouse position on drop javascripttouch drag and drop javascripthow to make a mouse dragging in htmlhow to get mouse drag and drop coordinates in javascriptdrag to confirm jqueryhow to do drag motion javascriptdrag a boll insede div in csshow to add high low drag option using javascriptxhtml code to drag images with mousejavascript mouse drag coordinates