The remaining variables seem a bit mysterious. The dragItem and container variables store a reference to their respective DOM elements. Variable DeclarationĪt the very top, we declare some variables that we'll be using all over the place: var dragItem = document.querySelector("#item") The JavaScript inside the script tag is where the excitement is at, so let's go through it more carefully. They just help us define the draggable element and the container it lives in. Anyway, take a few moments to glance through everything you see. If you take all of this and paste it into a HTML document, you will see your own version of this example working on your computer. SetTranslate(currentX, currentY, dragItem) Įl.ansform = "translate3d(" + xPos + "px, " + yPos + "px, 0)" InitialY = e.touches.clientY - yOffset ĬurrentX = e.touches.clientX - initialX ĬurrentY = e.touches.clientY - initialY Var container = document.querySelector("#container") Ĭontainer.addEventListener("touchstart", dragStart, false) Ĭontainer.addEventListener("touchend", dragEnd, false) Ĭontainer.addEventListener("touchmove", drag, false) Ĭontainer.addEventListener("mousedown", dragStart, false) Ĭontainer.addEventListener("mouseup", dragEnd, false) Ĭontainer.addEventListener("mousemove", drag, false) Var dragItem = document.querySelector("#item") The full HTML, CSS, and JavaScript for our drag example looks as follows: īorder: 10px solid rgba(136, 136, 136. The code you are about to see takes all those visuals and text and turns it into something our browser actually understands. There is a reason why we looked at each tiny step of a drag gesture in great detail. When the press is released, our draggable element stops tracking the pointer and remains put at the final destination. Once we move the pointer to the final destination, we release the press: While we are pressing down on the element with our pointer, we move our pointer to a new position:Īt each point during the move, our draggable element tracks and moves precisely with our pointer's position: To keep the terminology simple, I'll refer to the mouse cursor or finger (or stylus) more generically as just a pointer. This pressing down can be either via our mouse cursor or finger. To initiate the drag, we first press down on the element: Let's say we have an element that we would like to drag around or make draggable: The hard part is just understanding the various stages involved in a typical drag operation. As you will see in a few moments, the code behind making any element draggable isn't rocket science. Now that we have a good idea of what we will be creating, it's time to actually create it. If all works according to plan, the yellow circle should easily drag to the various positions you take it to. You can drag either using your mouse cursor or, if you have access to a touch-friendly device, using your fingers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |