Questions tagged [draggable]

An element capable of being dragged.

Filter by
Sorted by
Tagged with
0 votes
1 answer
17 views

Draggable (or click) labels changing the parameters in flutter

The following illustration most probably will be able to tell my question in an easier way. as seen in the image, when the user drags the text "CLASS 5" horizontally to the left, text will ...
emsiloader's user avatar
0 votes
1 answer
24 views

Draggable element does not apply border radius correctly in Chrome

Hey I have a simple draggable div that I've given a border radius. However, as soon as I start dragging the element, it still has white corners when the element hovers over itself. You can test it ...
Jan Wolfram's user avatar
1 vote
1 answer
17 views

Find out in dragend event if drag was cancelled

I'm dragging divs around. Sometimes, I want to cancel the dragging by hitting the keyboard escape key. This ends the drag (the "dragend" is fired) but I do not seem to be able to figure out ...
roughdog's user avatar
0 votes
0 answers
16 views

jQuery Draggable Not Working on Divi Website

I haven't been coding much in the past couple of years and I don't remember how to fix this issue that I was able to fix before. I have a Divi website with some draggable class items and I can no ...
AKAAKi 157's user avatar
0 votes
0 answers
32 views

TypeError: null is not an object (evaluating 'dispatcher.useState') when implementing DragDropContext in react

I am trying to implement a drag and drop list, I installed react-beautiful-dnd en added the list of items, set state to listItems, implemented DragDropContext and added a function onDrageComplete but ...
AKL-R's user avatar
  • 21
2 votes
1 answer
50 views

how to make the card draggable to other column using javascript?

i made this using html, css and javascript (with a lot of help from ai) as you can see it wont get dragged to the other columns, how do i fix this? i want to be able to make the cards to either be ...
soapytide's user avatar
0 votes
0 answers
21 views

Angular cdkDrag doesn't scroll the container while dragging

Simplified version here: https://codesandbox.io/p/sandbox/white-dust-2gldxn I have a grid container with elements that use cdkDrag directive. I am intentionally not using cdkDropList in a parent ...
noga's user avatar
  • 63
0 votes
1 answer
17 views

bokeh charts with reactgridlayout for dragable,resizable bokeh charts

I am using bokeh charts inside the React grid layout library, The React grid layout has the features resizable, draggable,rearrangable, The normal div is working fine for the React grid layout when I ...
 JENISHA J's user avatar
0 votes
0 answers
17 views

the onDrop function is not working ins react-dnd

I am using react dnd and the onDrop function is not working I tried adding console log to confirm the console log is also not been triggered. I tried multiple ways according to online resources but ...
rasif sahl's user avatar
1 vote
1 answer
77 views

Why is my SwiftUI knob jumping around instead of smoothly rotating?

I'm trying to create a SwiftUI view where I have a red knob that can be rotated smoothly around a blue rectangle. I've implemented the code below, but the knob seems to be jumping around instead of ...
Rin Star 's user avatar
0 votes
0 answers
26 views

Draggable html element with translateY is below pointer

Using Vue3/Vite with Ag-Grid and Fullcalendar6 with timeline view. I've setup two components (ag-grid and fullcalendar) and want to drag rows from ag-grid to fullcalendar, manage to do this ...
grelle's user avatar
  • 1
0 votes
0 answers
47 views

Drag and drop vue 3, render each item separately

I'm currently using laravel/inertiajs/vue3 to make a school planning web application, where the user has a calendar (monday->friday), that he can add classes to it using drag and drop, then when ...
Younes's user avatar
  • 1
-1 votes
0 answers
28 views

Solidjs make SVG element draggable

I'm working on making an image mask where you can drag the elements around to reveal the part of the image that the element covers. It's fairly easy to make a mask like this with SVG as seen below: &...
woop de schwoop's user avatar
1 vote
0 answers
52 views

Drag&Drop Custom Types with Transferable Protocol in Swiftui for macOS

I'm trying to implement a simple drag and drop feature with the transferable protocol. In my application, I have a Task struct as follows: struct Task: Identifiable, Hashable, Equatable, Codable, ...
iva123's user avatar
  • 3,415
0 votes
0 answers
17 views

Flutter Multiple Dragtargets with CustomPainter Path Possible?

I want to know if this is even possible in Flutter Gridview and CustomPaint Items Desired Outcome I tried it with a CustomPainter Class and different Custom Path Widgets In Flutter coded import '...
atomkern's user avatar
0 votes
0 answers
13 views

Draggable elements in an auto overflow container using Muuri

The goal: using Muuri to create draggable elements in a container with auto oveflow The problem: The elements that should be contained are ovelapping the container (which is in blue) - see below. ...
Zenomania's user avatar
0 votes
0 answers
25 views

Adding an Item to Another List When Drag and Drop in React Sortable HOC

I'm working on a React project and I'm using react-sortable-hoc for implementing drag-and-drop functionality. Currently, I have multiple lists, and I'm able to reorder items within the same list. ...
melvin debot's user avatar
0 votes
0 answers
12 views

Is there a way to move both the nested parent element and child element, in SortableJS?

My Requirements Only the children can have handles to move them around and re-sort inside of the correct Group Children from other groups can not mix When the child goes past its group it needs to ...
fizz's user avatar
  • 1
0 votes
0 answers
16 views

Jquery ui draggable uses the top left corner to snap to a grid, is it possible to change that to top right, bottom right etc?

Currently when snapping to a grid I can't move my draggable element to the edge of the page since it's snapping to the top left. I'm guessing this is due to the width of the element not being ...
csber3's user avatar
  • 175
0 votes
0 answers
17 views

Flutter - Position of Draggable Elements

I'm working on a Story feature that is similar to Instagram. One part will be draggable widgets (think text, gifs, or images). I am allowing the user to rotate & scale these widgets. I'm trying to ...
Luke Irvin's user avatar
  • 1,189
0 votes
0 answers
23 views

MUI DataGrid(Pro): How to pin or move the 'onRowOrderChange' icon to the left besides the pinned columns?

I'm using MUI DataGridPro component with rowReordering and pinnedColumns. I want to move the draggable icon (the icon appears when using rowReordering, I 've colored it yellow in the image) to the ...
user22285151's user avatar
0 votes
0 answers
14 views

Catching divs on top of each other during drag and drop operation with html drag drop

I'm building a drag drop application with React. I used html drag drop. My div elements are draggable. I want to make the background of the target div yellow when dragging and dropping another div ...
rumeysa yuk's user avatar
1 vote
1 answer
229 views

webpack can't resolve react-spring_core.legacy-esm.js in module of react-spring/web

My webpack.config.js const path = require("path"); const webpack = require("webpack"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const googleConfig = ...
Khải Nguyễn's user avatar
0 votes
0 answers
19 views

draggable image behind top image layer

I have created a (draggable/zoomable) image area via an upload link, and would like to have a transparent mask image overlaying it, whilst still being able to drag and zoom the background. The problem ...
Steven's user avatar
  • 1
1 vote
2 answers
32 views

When I use OwlCarousel nothing is displayed

I want to use OwlCarousel and I used both the js and css files that are inside the OwlCarousel website and the cdnjs files, but when I add the files, nothing happens. Can you please help me, where is ...
MeriJ's user avatar
  • 23
0 votes
0 answers
16 views

In Flutter, as the width of the listView I have increases, I want the sheet to increase in size

return AnimatedContainer( height: _containerHeight, duration: Duration(milliseconds: 1000), child: Column( children: <Widget>[ const SheetIndicatorComponent(),...
Eyup Ensar Kus's user avatar
2 votes
0 answers
58 views

Flutter Flame ScaleDetector doesn't work when a Component with DragCallbacks is added

How can I make scale and drag gestures work simultaneously in Flutter Flame? I want to have draggable components placed on the zoomable board. Imagine you have a puzzle board and you want to zoom in ...
theb1uro's user avatar
  • 546
2 votes
0 answers
147 views

react-dnd: dragging on overflowed parent

I am using react-big-scheduler library to manage events . When you drag and drop an event to a date that is outside the dates that are showen within the view it does not drop on the right date. so ...
Shivam Jha's user avatar
  • 3,200
0 votes
0 answers
48 views

Drag and drop list using react-beautiful-dnd

I have a component and i have used react-beautiful-dnd for dragging but the drag is not working and it throws a console message when we are trying to drag "Unable to find draggable with id: ...
Sai Krishna's user avatar
0 votes
0 answers
60 views

How to create a draggable Chrome extension?

I have to create a chrome extension with a draggable view, which means you can click and hold the extension's interface to move it around the webpage and place it wherever you prefer. Here's my ...
Shweta Mehta's user avatar
0 votes
0 answers
19 views

Draggable Input form

wanting to make an HTML input form that is draggable / transferable from one DIV to another DIV. and the new value of the form is the ID of the DIV ID where the input form is move into. created an ...
xector's user avatar
  • 1
0 votes
0 answers
91 views

Import third party library in my component library error

I try to build a component library vue3 + vite library mode. And I use vue.draggable.next in my component library. All is good on development environment, but when I try to build it, and import my ...
Jun cong Tang's user avatar
1 vote
0 answers
73 views

how to implement drag and drop in react for touch screen and mouse screens

How to make onDrop event work for a custom Draggable component in React? I have created a custom Draggable component in React that uses mouse and touch events to move a div element around. I want to ...
noone's user avatar
  • 51
0 votes
0 answers
21 views

How to use right mouse click events in use-gesture/react

When I use bind function from the react-use-gesture on a mesh, then the mouse down events on the mesh are overridden by the bind event. And usegesture is only taking only left click events. I tried ...
jsc's user avatar
  • 1
1 vote
2 answers
37 views

How to restrict showModalBottomSheet dismissing while tapping outside?

I have two pages and am navigating to the second with showModalBottomSheet. On the second page, I used DraggableScrollableSheet. When the text form field is empty, I must restrict the bottom sheet ...
Gowtham's user avatar
  • 31
0 votes
2 answers
127 views

How to make draggable element follow cursor on touchmove coords with InteractJs

I have one draggable element inside container and restricted to its bounds. I use InteractJs to implement this. Draggable element is hidden by default and becomes visible as touch starts. However I ...
moogeek's user avatar
  • 397
1 vote
0 answers
29 views

Flutter Draggable and dragtarget, how to prevent hover change data?

i have a dragtarget and multiple draggables. I was able to successfully drop the draggable to the dragtarget. But when a new draggable hovers over the placed dragtarget it removes the already placed ...
Febin Johnson's user avatar
3 votes
2 answers
619 views

How can I remove the transform style in a draggable element?

Using the example from CDK drag and drop, I want to add a preview of the dragged element with left and top positions without the transform style. HTML <div class="example-boundary"> &...
The Dead Man's user avatar
  • 6,256
0 votes
0 answers
10 views

javascript draggable not modifying coordinates on my ondrag event

i have a problem with draggables... I have a div tag which is scale to (0.5), inside of this tag i have a draggable but when i try to move it this drag is not following my cursor because of the scale.....
Luis Bermúdez's user avatar
0 votes
0 answers
22 views

drag element to left and right with autoscroll

I have a button that adds columns (wrappers) and in that columns I have button to add rows. When there are lots of rows a scrollbar appears (I have overflow-y:auto on the wrapper). Those rows are ...
bb2882's user avatar
  • 1
0 votes
0 answers
22 views

Draggable scroll to right don't have padding

My issues have on a draggable scroll widget when I suing draggable_widget 2.0.0 I can draggable scroll to AnchoringPosition normal, but when I try draggable to right it's overflow and if I draggable ...
Am Koem Heang's user avatar
0 votes
0 answers
63 views

angularjs 12 : how to drag start the element using drag handle element only

I need to drag start the selected element using drag-handle icon only. note that drag-handle icon element is positined as absolute. for achieve that on MouseDown Event on that Drag Handle Icon. I'm ...
Harsh Patel's user avatar
  • 1,052
0 votes
0 answers
102 views

Problem with drag and drop in react-beautiful-dnd, it only recognizes the top row as Droppable when line breaks

When flex wrap is enabled, the droppable doesn't recognize that a new line has appeared, and I can only drop the item on the line above. Does anyone know if it's possible to achieve this with this ...
Eduardo Santos's user avatar
2 votes
0 answers
50 views

Select multiple items from ListView and reoder them together

I have a working ReorderableSliverList solution but I need to be able to select multiple ListView items then reorder them in one go. So if I have a list of 10 items and I drag items with index 5, 8, ...
Toxic's user avatar
  • 65
1 vote
1 answer
204 views

React : How to create a Drag Handle with draggable?

I am unable to find an answer on how to make a react component draggable only when the Drag Button is clicked (Clicking anything inside the element wont trigger the drag event) Here is the Material UI ...
yeln's user avatar
  • 482
0 votes
1 answer
129 views

How to use a custom draggable / dragging ghost image?

I have red and searched for an answer for many many posts, but still cannot find the one that will answer my question. How do I change or use a custom ghost image for the draggable element? I red ...
yeln's user avatar
  • 482
2 votes
0 answers
60 views

Draggable annotation box when inside a subfigure

I want to create a draggable annotation box with Matplotlib. However, my ax is defined on a SubFigure object rather than a Figure. The following short code shows how the text box cannot be dragged in ...
Username_22's user avatar
0 votes
2 answers
88 views

Add class dynamically for react object (when dragged)

I want to keep the dragged object on the top of other objects. So, I have css basic.module.css .dragging-shelf { z-index:100; } then in function import styles from "../css/basic.module.css&...
whitebear's user avatar
  • 11.3k
0 votes
1 answer
69 views

Flutter update widget while dragging another one

I am new to Flutter and I'm trying to build an app with two draggable circles with a line going from one circles to the other I managed to do that but the line does not follow the circles during the ...
SuperGalou's user avatar
1 vote
1 answer
65 views

HTML/CSS Draggable elements

Good day. I am trying to build an application with pretty simple HTML/CSS-based draggable tree representation. <div class="tree"> <div class="leaf" draggable=true> ...
Der Zinger's user avatar

1
2 3 4 5
73