# draggable

The HTML draggable attribute makes an element draggable in the HTML drag-and-drop mechanism.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## How to Drag and Drop in React

DevFeed: [How to Drag and Drop in React](<https://devfeed.tech/articles/how-to-drag-and-drop-in-react-18958.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-drag-and-drop/>)

Author: Robin Wieruch

Published: 2024-10-10T04:56:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Library](<https://devfeed.tech/topics/library.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [container](<https://devfeed.tech/tags/container.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [react-dnd](<https://devfeed.tech/tags/react-dnd.md>), [react-drag-and-drop](<https://devfeed.tech/tags/react-drag-and-drop.md>), [state](<https://devfeed.tech/tags/state.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

A step-by-step React tutorial for building vertical and horizontal drag-and-drop lists with @hello-pangea/dnd. It covers stateful items, reusable components, Droppable and Draggable components, and reordering list state after drag events.

### Source excerpt

A tutorial about using Drag and Drop in React by example for a vertical list (later horizontal list) with @hello-pangea/dnd as DnD library ...

## Listening for element events with Compose for Web - Gustavo Fão Valvassori

DevFeed: [Listening for element events with Compose for Web - Gustavo Fão Valvassori](<https://devfeed.tech/articles/listening-for-element-events-with-compose-for-web-gustavo-fao-valvassori-38178.md>)

Original publisher: [Read original article](<https://touchlab.co/compose-html-events>)

Published: 2024-01-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [compose-for-web](<https://devfeed.tech/topics/compose-for-web.md>), [Web](<https://devfeed.tech/topics/web.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [compose-for-web](<https://devfeed.tech/tags/compose-for-web.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [css](<https://devfeed.tech/tags/css.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [event](<https://devfeed.tech/tags/event.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>)

### AI overview

This tutorial explains how to handle HTML element events in Compose for Web. It covers common event listeners, updating composable state from clicks and input changes, and using side effects to implement more complex behavior such as a draggable window.

### Source excerpt

In a declarative world, events are the main way to interact with the elements, and most components have a way to listen for them.

## Making Your React Native Gestures Feel Natural

DevFeed: [Making Your React Native Gestures Feel Natural](<https://devfeed.tech/articles/making-your-react-native-gestures-feel-natural-1479.md>)

Original publisher: [Read original article](<https://shopify.engineering/making-react-native-gestures-feel-natural>)

Author: Andrew Lo

Published: 2023-01-20T18:37:05Z

Content type: article

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [React Native](<https://devfeed.tech/topics/react-native.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [React UI animations](<https://devfeed.tech/topics/react-ui-animations.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [app](<https://devfeed.tech/tags/app.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [react-native](<https://devfeed.tech/tags/react-native.md>)

### AI overview

This article explains how to make draggable React Native interfaces feel more natural. Using a Shop app Sheet component, it shows how incorporating drag velocity, position, spring animations, elasticity, and resistance can improve gesture feedback and transitions.

### Source excerpt

When working with draggable elements in React Native mobile apps, there are some simple ways to help gestures and animations feel better and more natural.

## Simplifying Drag and Drop (Lists and Nested Lists)

DevFeed: [Simplifying Drag and Drop (Lists and Nested Lists)](<https://devfeed.tech/articles/simplifying-drag-and-drop-lists-and-nested-lists-37608.md>)

Original publisher: [Read original article](<https://www.taniarascia.com/simplifying-drag-and-drop/>)

Author: hello@taniarascia.com

Published: 2022-09-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Tania Rascia](<https://devfeed.tech/sources/tania-rascia.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [components](<https://devfeed.tech/tags/components.md>), [debug](<https://devfeed.tech/tags/debug.md>), [drag-and-drop](<https://devfeed.tech/tags/drag-and-drop.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>)

### AI overview

This tutorial shows how to simplify drag-and-drop lists and nested lists in JavaScript by extracting reusable components around a drag-and-drop library. It includes demos for basic lists and moving categories or items between nested categories.

### Source excerpt

I always forget how to use any drag and drop library until I have to use it again. Currently, the one I've been working with is , the...

## Swipe to reveal in Jetpack Compose

DevFeed: [Swipe to reveal in Jetpack Compose](<https://devfeed.tech/articles/swipe-to-reveal-in-jetpack-compose-25899.md>)

Original publisher: [Read original article](<https://proandroiddev.com/swipe-to-reveal-in-jetpack-compose-6ffa8928a4c2?source=rss-56174fa84bcc------2>)

Author: Denys Rudenko

Published: 2021-02-19T17:21:58Z

Content type: tutorial

Language: en

Sources: [Stories by Denis Rudenko on Medium](<https://devfeed.tech/sources/stories-by-denis-rudenko-on-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [androiddev](<https://devfeed.tech/tags/androiddev.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-animation](<https://devfeed.tech/tags/compose-animation.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [gestures](<https://devfeed.tech/tags/gestures.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [stateflow](<https://devfeed.tech/tags/stateflow.md>), [swipe-to-reveal](<https://devfeed.tech/tags/swipe-to-reveal.md>), [viewmodel](<https://devfeed.tech/tags/viewmodel.md>)

### AI overview

A tutorial showing how to implement swipe-to-reveal cards in Jetpack Compose by detecting horizontal drag gestures and managing revealed card state with a view model and StateFlow.

### Source excerpt

Swipe to dismiss is really easy to implement in compose, including item removal animation by using a combination of SwipeToDismiss & AnimatedVisibility composables. SwipeToDismiss doesn't allow us to stop the dragging motion midway though, so let's take a look how we can achieve the following by detecting horizontal drag gestures on any composable. https://medium.com/media/1a355b2d3e397414c51442342f16cda5/hrefStep 1: Creating a data source Those who've read expandable lists in jetpack compose can skip this step, since data source is almost the same. First we define our model to hold the card related info: data class CardModel(val id: Int, val title: String) We'll be using AAC viewModel example here, but feel free to use any "controller" abstraction you prefer. https://medium.com/media/28ca457093268969ac4f2e179ee860ef/href This class serves 5 purposes: Holds list of cards using MutableStateFlow in _cards field, and exposes a StateFlow to observers via cards field. Holds list of "revealed" card ids in _revealedCardIdsList, and exposes them to observers via revealedCardIdsList field. Provides list of cards using getFakeData() function. We need a coroutine here, to emit the testList into _cards. Has onItemExpanded() to mark cards as revealed, by adding tapped card id to _revealedCardIdsList, and notify observers about this change by mutating the state of _revealedCardIdsList. Has onItemCollapsed() to remove revealed card id from _revealedCardIdsList, and notify observers about this change by mutating the state of _revealedCardIdsList. Step 2: CardsScreen composablehttps://medium.com/media/4505fde17b0e8f9672f392cb9b3296f3/href We are observing the viewModel.cards containing our list of cards, and viewModel.expandedCardIds with the help of .collectAsStateWithLifecycle(). UI is quite simple here, each list item is represented with a Box that contains our hidden action icons & the draggable card. ActionsRow -- row with 3 icons, exposes callbacks from each icon tap: onDelete,