All Questions
Tagged with drag-and-drop draggable
635
questions
1
vote
1
answer
41
views
Angular Drag & Drop with nested section and subsection
I am trying to implement a drag-and-drop feature in my Angular 14 Application where I have nested sections and subsections. I want to move each section up or down and subsections will be moved between ...
- 147
1
vote
0
answers
39
views
Implement drag and drop functionality in recursive components
I'm trying to implement drag and drop functionality between two JSONs to map the keys of one JSON to another. I created the JsonViewerComponent that accepts JSON data as input and displays it using ...
- 11
0
votes
0
answers
38
views
Draggable items break styles on dragging
I'm creating a sequence quiz and chose @hello-pangea/dnd package (which is rewritten react-beautiful-dnd and I succeeded to create a simple component but I faced a problem that when I grab draggable ...
- 302
0
votes
0
answers
28
views
drag and drop doesn't work as expected - react.js
When I tap a todo item on a touch screen (which works fine on a PC browser), it correctly marks the item as complete and moves it down in the list, which is the expected behavior and works great. ...
- 1
1
vote
1
answer
51
views
cdkDragPlaceholder not working for horizontal Drag and Drop
I'm working on a website which involves horizontal drag and drop of elements.
I'm able to do horizontal drag and drop. But i need the user to identify where he actually dropping the elements. For that ...
- 1,179
1
vote
0
answers
31
views
Parent elements overflow act differently for different child elements?
I have problem with letting one child override parents overflow but not the other
#second-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0px;
height: 503px;
}
.inv {
...
0
votes
0
answers
13
views
how to drag drop svg elements d3v7 d3v5 working fine but same d3v7 not working d3 drag start drag end
I am using D3.js for modify svg i want to update d3v5 to d3v7 but svg element drag drop not working in updated version old d3v5 working perfect in multiple svg. I have browsing the internet but i can'...
0
votes
0
answers
21
views
Can't change not-allowed cursor when dragging on div borders
Whenever I'm dragging a div over another one, I see the not-allowed cursor appearing and flashing when passing over the borders of another div, even if it has no borders specified.
The expected ...
- 1,045
0
votes
0
answers
33
views
How to change the mouse cursor when a widget in Flutter is drag (and drop)?
in Flutter I have a LongPressDraggable.
I want to change my cursor to a SystemMouseCursors.grabbing when I’m grabbing and moving around the widget how to do this?
I tried to set ...
- 1,568
0
votes
0
answers
33
views
Problem drag and drop React library won't' work properly
I am having a problem in my project. I am building a kanban and using the library react-beautiful-dnd
the problem I am facing is that when i load the page it won't allow me to drag and drop the ...
- 21
0
votes
0
answers
17
views
Dynamically Create Draggable items
I have a webpage with multiple rooms, these rooms contains banners that are dynamically created using a function that fetches data from the websocket. Everything is going god but since the data keeps ...
2
votes
1
answer
69
views
can't drag boxes to specific time slot in weekly calendar
I can drag and drop boxes however it drops at whatever timeslot is empty first rather dropping to actual timeslot for example, if I drop box to 26th t1 to 27th t2 then it will drop the box to t1 27th ...
- 31
0
votes
1
answer
179
views
drag and drop box showing stop sign
I want to be able to drag and drop the draggable box to any other date and it should remove that previous one.
For example if I move drag box from 5th march to 6th march it should remove from 5th ...
- 31
1
vote
0
answers
37
views
cards dont always jump to make space for a new card when reordering list
I am currently trying to implement a drag and drop in a project of mine! I have this strange thing happen sometimes where after I moved cards around once or twice and I try and move another one, it ...
0
votes
0
answers
74
views
Is there any way to implement drag and drop sortable Ant Design Collapse?
https://ant.design/components/collapse
using Collapse component from Ant.design 5.12
not able to implement vertical drag and drop sortable mechanism as the Collapse.Panel is deprecated now. So there ...
- 126
0
votes
1
answer
130
views
How to make .draggable() work with click+drag rather than long-press+drag?
I have been programming an app in SwiftUI which heavily uses the in-built .draggable() and .dropDestination() modifiers.
To enhance the user experience, I would like to make .draggable() work with ...
- 11
0
votes
0
answers
42
views
Dragged component overlapping/over drop target/component so onPointerOver/onPointerEnter event of below component not firing
In my react project, I was able to implement a crude implementation of drag and drop as I didn't want to rely on any drag and drop libraries in order to have a fundamental understanding of how to ...
- 142
-2
votes
1
answer
108
views
Dragging a element at a position of Cursor in ReactJs
I am trying to build a game in React, It needs a Drag-and-drop feature. The game has two major components, SideBar and a GameBoard. SideBar contains elements to be dragged onto GameBoard. The Drag and ...
- 19.4k
0
votes
0
answers
78
views
ngx-datatable with Draggable Rows
I am trying to implement the drag and drop functionality for but it doesnt work. The structure of my code is as below:
<ngx-datatable class="material" [columnMode]="ColumnMode....
- 1
0
votes
1
answer
342
views
Listeners conflict while working with dnd-kit
I am working on a todo list application and I wanted to make the todos draggable.
I am using dnd-kit to achieve the same.
I provided the DndContext and SortableContext in my parent container.
...
0
votes
0
answers
64
views
Different level drag and drop with ng2-dragula
I am using ng2 dragula in my angular app. Nested drag and drop is available in my case as follows.
-a
--b
--e
---k
--f
-c
--g
--h
---i
--j
-d
Here we have parent, child ...
- 109
1
vote
1
answer
357
views
Angular 17: select correct ElementRef of children component on mouseover event
I am constructing draggable and resizable elements in a circumscribed area.
When I hover these elements I dynamically apply sensitive dots (red squares) over them so that I can also perform resizing.
...
- 73
4
votes
1
answer
609
views
dnd-kit: drag relative to mouse pointer instead of draggable
Using @dnd-kit/core the default behavior is to have the dragged element (and the div within the DragOverlay) be dragged relative to its original position. If I click and drag the Draggable at some ...
- 15.4k
0
votes
0
answers
73
views
How do I change the source of an image drag to the desktop using HTML5 Drag and Drop API?
I have a
<div draggable><img src="https://example.com/test.webp" alt="testing" /></div>
element on a page. By default on MacOS (Chrome or Safari), if you drag ...
- 968
1
vote
0
answers
276
views
How to do multi-select in dnd-kit/core React JS
Please how can I implement multi-select in dnd-kit?
This storybook shows it in action but the full code wasn't shown LINK TO STORYBOOK
0
votes
0
answers
9
views
dragged items to correct target spot
I am making my to-do list items draggable. When the dragged element is 'over in the list'/'gets dragged down' it is added to the spot before target and target stays in the same spot. It also means ...
0
votes
0
answers
78
views
Xarrow not updating when I scroll down
I'm using Xarrow in a react project to connect between draggable components, the problem is that when I drag a component down and scroll to see it, the arrow doesn't update and it stays in it's ...
5
votes
2
answers
388
views
.dropDestination doesn't execute with my custom transferable type
I have defined
import SwiftUI
import UniformTypeIdentifiers
enum LayerType: String, Codable, RawRepresentable {
case text
case image
}
struct TransferableLayer: Identifiable, Hashable, ...
- 2,322
0
votes
1
answer
180
views
Multiple Moveable Resizable Windows with HTML / CSS
I am attempt to make multiple moveable resizable windows using only HTML / CSS.
Based on this post from CSS-Tricks I have made two windows and they can both be moved.
However, the second window ...
- 1,322
0
votes
1
answer
81
views
ReactSortable render nested component?
My purpose to implement dragging elements from one list to another, example:
Dragging layout2 element (has 2 nested blocks) into editor.
Dragging paragraph into the one of two layout blocks.
The ...
- 117
-2
votes
1
answer
135
views
js Drag and Drop with snapping [closed]
In this example, the workplace consists of 26 tables. When the employee is dragged from the top box, I want him to snapped to the red dot and only on the red dot can be dropped. Can someone help, ...
- 673
0
votes
1
answer
174
views
How to check if something is currently being dragged (from a different origin)?
The HTML Drag and Drop API will fire dragstart/dragend events on the item being dragged.
This makes it easy to update a dragInProgress variable, which can be used to check if a drag is in progress.
...
- 7,943
-2
votes
1
answer
132
views
wpf drag and drop while moving the control
can't seem to find how to implement behavior that supports drag&dropping a control (with DragEnter, DragOver, DragLeave and DragDrop events being fired on controls that are listening) while being ...
- 327
0
votes
0
answers
16
views
Fullcalendar: accept dragged elements from external sources
I want to drag html elements from a different application onto my FullCalendar app. The other application does not have access to the FullCalendar library, so it cannot use Fullcalendar.Draggable.
I ...
- 11.1k
0
votes
0
answers
69
views
Drag an animated component from a ScrollView container to another ScrollView container in React Native
I have two containers which are ScrollView. In one ScrollView, I have a list of texts that are animatable and can be dragged over. The problem is when I dragged them into another ScrollView that ...
- 71
0
votes
0
answers
49
views
How to make an nested draggable list like an figma layer section?
Need that feature for my project , but I had no idea how ? I already made the simple normal draggable , and it work just fine , but I can't drag to make it nested like figma does
here is my normal ...
0
votes
0
answers
18
views
Angular drag and drop - hiding droppables causes the index to malfunction
I have a 2-dimensional dashboard of widgets on a 3x3 grid. I allow customization of the dashboard. The customization works in such fashion, that the widgets that are removed from the dashboard are ...
- 1,288
0
votes
0
answers
31
views
Dragged element text is sticked to cursor as "hologram"/"shadow"
I'm trying to make an element draggable. It contains text and as soon as I drag the element outside the element boundaries, this weird clone of the text forms that is only slightly visible and bound ...
- 45
0
votes
0
answers
19
views
Drag item into list no draggable angular mat-list
I have two lists, one with cdkDrag and the second list without cdkDrag. I want to drag item from list1 to list2(no draggable) and when the item dragged is dropped over an item of the list1 I want to ...
- 15
0
votes
2
answers
811
views
ResizeObserver loop completed with undelivered notifications /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 ...
- 269
0
votes
0
answers
67
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 ...
- 192
0
votes
0
answers
205
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
0
votes
0
answers
266
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. ...
- 19
0
votes
0
answers
56
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 ...
- 1
0
votes
0
answers
268
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 ...
- 11
0
votes
0
answers
51
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 ...
- 43
5
votes
3
answers
2k
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 = ...
- 55
1
vote
0
answers
401
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 ...
- 61
0
votes
1
answer
526
views
How to achieve this drag and drop layout in react native?
I wanted to implement drag and drop question-answer layout in react native. I have tried different libraries but have not gotten the desired output. can anyone suggest to me how to achieve this in ...
- 279
1
vote
1
answer
135
views
Drag and Drop Template using JavaScript
After Dragging a block from left container to right container, it gets removed from left container. How to prevent from removing from left container and should drag and drop multiple times the same?
I ...
- 25