Questions tagged [draggable]
An element capable of being dragged.
3,634
questions
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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:
&...
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, ...
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 '...
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.
...
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. ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 = ...
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 ...
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 ...
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(),...
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 ...
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 ...
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: ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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">
&...
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.....
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 ...
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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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&...
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 ...
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>
...