Questions tagged [draggable]
A movable component that can be easily repositioned by dragging.
In the visual representation, there are two Accordions—one positioned on the left (30%) and the other on the right (70%). Upon clicking the button, the right accordion disappears, while the one on the left expands to cover the full width (100%). A featu ...
I am looking to develop a draggable component in React without relying on any third-party library. Below, I have provided an image depicting how the component might look. Currently, my component code appears as follows: import React from 'react'; import { ...
I have a situation where I have two parent divs containing dynamic children divs, and I want to enable POST requests to PHP when items are dragged from one side to the other (and vice versa). Here is the Javascript code I am using: function allowDrop( ...
Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...
When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...
Are you familiar with the library https://github.com/SortableJS/Vue.Draggable? I am trying to achieve a drag and drop functionality where I can drag a file into a folder. However, I am facing an issue as the @change event only provides data about the drag ...
i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...
Can anyone provide me with helpful resources or tutorials to create a draggable popup using HTML5 without jQuery? I want to keep it simple and avoid external libraries like jQuery UI. Currently, I have an absolutely positioned div that looks like a popup ...
Can jQuery's Draggable be used with an overlapping PNG image (not as a background image, but for printing purposes)? I attempted using the CSS style "pointer-events: none," however this solution does not function correctly in Internet Explorer. <d ...
Having an issue with removing an item from an array. Let's say I have an array with 5 items: [0,1,2,3,4] When deleting item number five [4], it works as expected. However, when trying to delete item [1], objects [2,3,4] are also removed. What could be the ...
My current project involves the use of the vue draggable package, and below you will find the complete component: <template> <div> <button class="btn btn-secondary button" @click="add">Add</button> ...
I'm trying to create a resizable and draggable div within a larger div that is contained in a smaller div with a scroll bar. Here's the structure: <div id="hgcScroll" style="width:600px;overflow:auto"> <div id="hgcRegle" style="width:800px"& ...
I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...
Currently, I am facing compatibility issues within my Angular application when trying to incorporate both ngSanitize and ngDragDrop. The ngDragDrop plugin can be accessed at , while ngSanitize documentation is available at https://docs.angularjs.org/api/ng ...
I'm having trouble making a div element draggable. Inside the div, there is an img and some text that acts as a label for the image. The issue is that when I begin dragging by clicking on the img, it's the img that gets dragged instead of the parent div. H ...
Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...
Hey there, I'm looking to implement a drag and drop feature for some HTML elements but I'm struggling to capture the end position after dropping. After checking out the documentation, I see that with the use of the cdkDrag directive, there' ...
Struggling to create a slider and encountering an issue. The problem lies in absolute items blocking slider drag events. I need a solution that allows dragging the underlying image through absolute positioned items. Any ideas on how to achieve this? MANY T ...
I need help creating a feature where an image can be dragged and dropped, but only appears after a button is clicked. I've been searching online for solutions, but haven't found anything that works. Can someone please help me troubleshoot this co ...
I am looking to implement a feature where users can drag an image into either container 1 or container 2. Depending on where the image is dropped, I want to update that specific container by making a database call or updating a row in one of my tables. My ...
https://i.stack.imgur.com/9bpRI.png When trying to perform a drag and drop operation, the elements are identified correctly and the mouse moves between them. However, the drag and drop action does not occur. The UI does not display any highlights when cli ...
I encountered an error while working on this Next.js React project Type error: 'Draggable' cannot be used as a JSX component. Its instance type 'Draggable' is not a valid JSX element. The types returned by 'render()&apo ...