All Questions
Tagged with drag-and-drop css
510
questions
1
vote
0
answers
21
views
Angular 3 levels of drag and drop
I'm working on an Angular application where I need to implement drag and drop functionality for a menu system with the following structure:
Header menu can have both Group menu and Menu items as ...
- 241
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
votes
1
answer
25
views
Assign different overflow behaviour for the parent depending on the child
I am trying to figure out how to make overflow hidden for for the parent child for one child but not for the other. I am making an inventory for fivem so i want it possible to scroll through the slots ...
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 {
...
1
vote
0
answers
22
views
Adjust ghost image for drag and drop feature based on React State
I have a drag-and-drop application that reorders an array of cards. When start dragging, I'm removing the dragged item from the array and then putting back on drop based on the new position. ...
- 11
0
votes
1
answer
64
views
Maintain row position during drag n drop when other rows collapsed
I have a draggable/sortable list of accordion items (or expandable rows) and I'm collapsing all of them during drag n drop to make it easier for the user to see what they're doing.
If I do this only ...
- 6,669
3
votes
3
answers
111
views
How can I add drag & drop functionality to my file input HTML tag which I have customized as an image?
I am currently designing a form using HTML, CSS, and JavaScript which includes an input type=file. I customized the form, so that the input now uses an image which can be clicked to browse and select ...
- 33
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
1
answer
43
views
Drag items disappear/wont move when trying to move them
I'm trying to make a 3x3 grid with the grid items being each a part of 1 image. These items I want to be able to drag and drop them inside another 3x3 grid.(In any order I want).
I've encountered a ...
- 5
0
votes
1
answer
124
views
css style cursor during drag & drop
When using the HTML Drap and Drop API, how can I change what the cursor looks like?
It seems to be using the default no-drop while not over a dropable zone as well as some other ones (that I can't ...
- 378
1
vote
0
answers
86
views
Separator after x elements in a react-beautiful-dnd list
I'm trying to have a separator between my 3rd and 4th element in a react-beautiful-dnd <Droppable/>.
It's pretty easy to have the separator before drag and after drag, the problem is when it ...
- 11
1
vote
0
answers
24
views
Does e.target work differently on mobile?
I have noticed that when I was debugging with the devtools and set it to the screen to be mobile, e.target was detecting the parent divs(especially the ones' display is flex) instead of the children ...
- 31
0
votes
1
answer
31
views
need an function swap for swaping elements
function swap(ev, targetId) {
//Working on a school project and got stuck, was trying to swap .gif like drag and drop
const currentId = ev.dataTransfer.getData("text");
const current = document....
0
votes
1
answer
150
views
Cannot drag boxes in calendar weekly column
UPDATED CODE BELOW:
After doing a bit of workaround I can drag and drop boxes now however it drops at whatever timeslot is empty first rather dropping to actual timeslot for example, if I drop box to ...
- 31
0
votes
0
answers
29
views
Is it possible to change the cursor while dragging using HTML drag and drop [duplicate]
Í'm trying to make my application look a little better, and something that has been bothering me is the cursor while dragging using HTML drag and drop.
I have tried searching stackoverflow and google ...
0
votes
1
answer
30
views
Issue with Resizing Shapes by Dragging Handles in JavaScript
I'm working on a JavaScript application where I'm implementing functionality to resize shapes by dragging their handles. I've encountered an issue with the resizing functionality. Also, when resizing ...
0
votes
1
answer
205
views
Microsoft Edge Visual Search prevents dragging image
Since Microsoft Edge Version 120 something for Visual Search has changed which breaks dragging a image within my Angular Web App.
The img Element has the property draggable="true".
If ...
- 943
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
324
views
Ability to move table rows up/down (drag and drop)
My table has five columns.
I would like to add the ability to drag rows up or down. That is, when the user hovers over a row and then hovers over a button (in the first column), I would like the user ...
- 125
0
votes
0
answers
155
views
drag and drop in vuejs using an icon
I am working on drag and drop feature in my vue.js,here is my parent component:
<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from 'vue'
import AddCourseCard ...
- 598
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
1
answer
646
views
how to change cursor while dragging in dragstart or dragover in Javascript?
I'm trying to change the cursor while im over the drop zone , I saw these questions but didn't help : Q1 , Q2 and Q3 ,
Here is what i tried . first I tried change it in dragstart and dragover by using ...
- 133
0
votes
0
answers
67
views
Drag and Drop Behavior Inconsistent between Images in Safari
In this video, I'll be demonstrating an inconsistent drag-and-drop behavior that I've observed specifically in Safari. As you'll see, when dragging the motor.png for the second time, the element is ...
0
votes
0
answers
80
views
Drag and drop issue with Chrome
I am trying to implement a drag-and-drop using JavaScript. It works perfectly in Firefox, but the drop does not work well in Chrome. The dragged file cannot be dropped easily on the defined area.
Here'...
- 1
1
vote
0
answers
79
views
Issue with Drag-and-Drop Reset in JavaScript
const grid = document.querySelector('.grid');
const leftDiv = document.querySelector('.left-side')
const rightDiv = document.querySelector('.right-side');
const btn = document.querySelector('.btn');
...
- 13
2
votes
1
answer
452
views
Drag and drop elements between two drop zones in R shiny
I am trying to use shiny to drag and drop elements from one column to another in a dynamic document.
However, I could not identify a way:
to have the A, B, C elements in one of the boxes (drop zones) ...
- 164
0
votes
1
answer
70
views
How to remove the shadow of the draggable item in Angular
How can I eliminate the shadow that appears beneath the backdrop when dragging an item within the Bootstrap modal dialog?
As depicted in the accompanying picture, I am attempting to drag the "...
- 893
1
vote
1
answer
45
views
Dragula hide list bullets while dragging
I am trying to create a sortable list of images using Dragula.
In this list i dont want the bullets to be visible. The problem I am experiencing is that as I drag an element, the bullet for that ...
- 69
1
vote
1
answer
146
views
Javascript/CSS - Clip image to container while dragging/panning and scaling/zooming
I want to be able to drag and zoom an image, but hide the overflow beyond the limits of the images container. Here is the basic setup:
<div class="region-device-images-modal">
<...
- 105
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
1
vote
0
answers
180
views
Drag and drop sequence of mouse events not working as expected
As a continuation to my other question, I tried another approach to simulate drag and drop functionality using mouse events. First, here's a list of draggable elements that can be reordered on drag ...
3
votes
1
answer
2k
views
Why is the Transform and Translate data null/undefined using DND-Kit
Firstly, Thank you for looking at my problem.
I am trying to implement and learn the logic of dnd-kit in react, & I have created this webapp where the elements that are being mapped into a ...
- 69
1
vote
2
answers
166
views
Get Data from Local Storage JavaScript
I work on the Kanban board app, it contains three columns for not started, In progress, and Completed tasks, I can add a new task, edit it, delete it, and drag and drop it from column to column. I ...
0
votes
1
answer
452
views
how to make drag-drop list in HTML and send List order to asp.net core backend?
I am working on an HTML file
When I show a list on a page, I want the user to be able to drag and drop items from the list to a part of the same page.
The list contains sample questions of a lesson, ...
- 49
0
votes
0
answers
21
views
How to prevent element dragged from leaving its place
Please check the live code:
I am trying to make a drag and drop but dragged item must be duplication (not moved from one place to another)
let injectableEL = ''
function onDrag(ev) {
console....
- 85
-2
votes
1
answer
26
views
How can I make a dragImage opaque with pure JS?
How can I make a dragImage opaque with pure JS? My code doesn't work for some reason https://stackblitz.com/edit/js-azetx8?file=index.js
- 37
1
vote
1
answer
219
views
JavaScript Drag and Drop Swap Items
I'm trying to create a simple drag & drop example to use that will allow swapping of items. For example:
Item 0
Item 1
Item 2
Item 3
If I drag and drop "Item 0" over "Item 3" ...
- 865
1
vote
1
answer
205
views
How to make a grid drag and drop like in google keep
I am trying to accomplish a drag and drop section like in google keep, in vuejs,
where every div can be in a different height(all in the same width)
example
Searched google, used a library that didn't ...
- 11
0
votes
1
answer
624
views
Drag and drop rotated images javascript
so i have a code that allows me to drag and drop an img tag. The drag and drop works fine but when i added a rotation function, the drag and drop started acting weird (the coordinates changed and when ...
- 75
0
votes
1
answer
696
views
angular material drag&drop calls callback after css transition end
I have implemented list of elements which can be drag and dropped via angular material drag and drop feature
like in tutorial https://material.angular.io/cdk/drag-drop/overview
I've implemented ...
- 11
0
votes
1
answer
112
views
how to drop an element into a div and retrieve the coordinates relative to the div element?
i have a div element with id="drag", if a div element with id='drag' is dragged and dropped onto a div element with id="drop", it will display the coordinates value relative to the ...
0
votes
1
answer
94
views
Make the cursor look like HTML5 drag and drop cursor
Drag and drop in HTML5 uses the following cursor shape when an element is dragged over the drop zone:
Would it be possible to set cursor to above shape without using drag and drop?
- 815
1
vote
1
answer
335
views
Can't drag element, by clicking on the slotted text (Vanilla JS)
I created a draggable Web-Component with a slot:
const DragItemTemplate = document.createElement("template");
DragItemTemplate.innerHTML =
`<style>` +
`div{` +
`background: gray;`...
- 85
1
vote
0
answers
51
views
Why draggable object jump on the random position jQuery?
I work with draggable and dropablle object, and I have issues with jumping objects on random place.
I have few dropablle areas, and dragable objects, for this I use script:
$('.draggable-box')....
- 622
0
votes
1
answer
192
views
Don't open image in browser when dropped into a window
When I drag an image and drop it into an open browser window, the browser will (provided I didn't drop the image into an input field) open this image in the browser. The address bar shows something ...
- 3,118
1
vote
1
answer
438
views
Javascript (vanilla) drag and drop does not work the second time an element is dragged and dropped
I am trying to implement a drag and drop functionality using vanilla Javascript on my web app, where element gets moved to a new position within a div, once it's dragged and dropped.
But I am having ...
- 75
0
votes
1
answer
124
views
Restore original position draggable element when it's dropped in the wrong place HTML + Javascript
Im tryinig to use this code which another spoke of him in another post but that modified a little.
http://jsfiddle.net/fsy37kv4/
I would like when some circle was dropped in a wrong position, the ...
- 61
4
votes
0
answers
627
views
Opacity gradient in drag and drop
I'm trying make a drag and drop component, but when dragging an opacity gradient is automatically applied.
I performed several tests and I noticed that when the component less than 300px approximately,...
1
vote
1
answer
723
views
Disable Scroll When Dragging in MUI Grid
I'm currently writing an app where I have many columns in a MUI Grid, scrolling horizontally. It's a task planner app, and when I create a task, I want to be able to drag it between the different ...
- 31
5
votes
1
answer
3k
views
drag and drop when using flex-wrap
I followed a tutorial for making a list that you can drag and drop vertically. I found a way to make it work horizontally, and wanted to add flex wrap to make it look better. But now when I try to ...
- 111