{"id":306795,"date":"2020-04-16T16:06:24","date_gmt":"2020-04-16T23:06:24","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&p=306795"},"modified":"2021-10-03T12:12:35","modified_gmt":"2021-10-03T19:12:35","slug":"draggable-elements","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/draggable-elements\/","title":{"rendered":"Draggable Elements"},"content":{"rendered":"\n

Just to be clear, even when we pull this off in HTML and CSS, all we’re getting done is making the element draggable around the screen. If you actually need to do something<\/em> as a result of that dragging, your back in JavaScript territory.<\/p>\n\n\n\n

This trick comes by way of Scott Kellum<\/a>. Scott has done a number of my absolute favorite CSS tricks over the years, like this super simple @keyframes setup<\/a> that bounces an element off the viewport edges like an old school screensaver, to an impressive Sass-powered parallax technique<\/a>. <\/p>\n\n\n\n

There really just one CSS thing that can help us with click-and-drag, and that’s the browser UI we get on desktop browsers when we use the resize<\/code> property. Here’s a <div><\/code> where we use it (along with overflow: hidden;<\/code> which is a prereq for it to work):<\/p>\n\n\n\n