How to Create Draggable Elements Using CSS

As web developers, we often find ourselves needing to create interactive elements on a webpage. One such feature is a draggable element, a component that a user can click and drag around the screen. However, as of the most current HTML and CSS standards, this functionality is not natively supported by CSS alone. We usually rely on JavaScript or libraries like jQuery UI to make elements draggable. But what if I told you there’s a CSS workaround that can give the illusion of a draggable element?. Don’t forget to learn the post. In this interesting article I will share with you how to create a draggable element using only CSS.

Well, there is! But keep in mind, this workaround does not provide full draggable functionality. It creates an illusion of drag and drop by allowing an element to be resizable.

How Does Work Draggable Element with CSS?

The trick is to utilize the resize property in CSS. This property controls whether an element can be resized by the user, and if so, along which axes. By setting resize: both;, we allow the element to be resizable in both directions, horizontally and vertically.

<textarea class="draggable">
    I look like I'm draggable!
</textarea>

.draggable {
        width: 100px;
        height: 100px;
        background-color: #F2F2F2;
        overflow: auto;
        resize: both;
    }

In this example, we have a textarea element with the class draggable. The CSS class draggable is styled with the properties width, height, background-color, overflow, and resize.

• width and height properties set the size of the textarea.
• background-color property sets its color.
• overflow: auto; allows the contents to be scrolled if they exceed the textarea’s boundaries.
• resize: both; allows the textarea to be resizable by the user, in both directions.

When you run this code, you’ll see a red textarea that you can resize by dragging from its bottom right corner. While it’s not truly draggable, it emulates the feeling of being draggable!

Read More

Remember, this is not a real draggable implementation; it’s a visual trick. The element is actually resizable, not draggable. If you need true drag and drop functionality, where the element can be picked up and moved anywhere on the screen, JavaScript or a JavaScript-based library is required.

How to Make Draggable Div Using CSS?

The resize property applies only to block-level and replaced elements, and doesn’t work on inline-level and non-replaced elements, or on block-level elements where overflow computes to “visible” But, for a div, which is a block-level element, the resize property can be effectively used with proper overflow settings. This method allows us to create a draggable div using only CSS.

Conclusion

The CSS resize property provides a simple and effective way to create a resizable element that can mimic a draggable one. This technique is handy when you want to add a bit of interactivity to your website, without the need for JavaScript. However, remember its limitations, and when you need true draggable functionality, opt for JavaScript or a similar tool.