Questions tagged [draggable]
An element capable of being dragged.
draggable
3,692
questions
195
votes
12
answers
257k
views
Preventing an image from being draggable or selectable without using JS
Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here's the issue:
Can be dragged and ...
- 3,249
117
votes
7
answers
107k
views
How can I make a jQuery UI 'draggable()' div draggable for touchscreen?
I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item.
Basically, I click or tap on div#everything (100% high ...
- 33.8k
85
votes
10
answers
41k
views
Determine what is being dragged from dragenter & dragover events
I'm trying to use the HTML5 draggable API (though I realize it has its problems). So far, the only showstopper I've encountered is that I can't figure out a way to determine what is being dragged when ...
- 77.2k
80
votes
21
answers
98k
views
jQuery draggable shows helper in wrong place after page scrolled
I'm using jQuery draggable and droppable for a work-planning system I'm developing. Users drag jobs to a different day or user, and then data is updated using an ajax call.
Everything works fine, ...
- 8,593
69
votes
18
answers
161k
views
jQuery UI - Draggable is not a function?
I've trying to use the draggable effect on some divs on a page, but whenever I load the page, I get the error message:
Error: $(".draggable").draggable is not a function
I've had a look around it ...
- 879
65
votes
9
answers
224k
views
Moveable/draggable <div>
This is my updated and modified script, it works completely, except I would like to universalize it... observe the **** how can I make it so that I don't have to do function(e){BOX.Draggable.elemen = ...
- 1,338
65
votes
4
answers
21k
views
Precise Drag and Drop within a contenteditable
The Setup
So, I have a contenteditable div -- I'm making a WYSIWYG editor: bold, italics, formatting, whatever, and most lately: inserting fancy images (in a fancy box, with a caption).
<a class="...
- 7,541
63
votes
12
answers
122k
views
Draggable div without jQuery UI
I'm trying to make a div draggable without using jQuery UI.
However, I'm stuck with the code below. I understand that I should use the mouse position relative to the container div (in which the div ...
- 20.7k
58
votes
10
answers
120k
views
make bootstrap twitter dialog modal draggable
I'm trying to make bootstrap twitter dialog modal draggable with this jquery plugin:
http://threedubmedia.com/code/event/drag#demos
but it doesn't work.
var $div = $('html');
console.debug($('.drag'...
- 5,641
57
votes
4
answers
41k
views
How can i make a MatDialog draggable / Angular Material
Is it possible to make a Angular Material Dialog draggable?
I installed angular2-draggable and can of course use the functionality on all other elements.
But because the dialogs are dynamically ...
- 615
56
votes
5
answers
128k
views
jquery draggable: how to limit the draggable area?
I have a draggable object (div), and some droppable ones (table TD's). I want the user to drag my draggable object to one of those droppable TD's.
I enable draggable and droppable this way:
$("....
- 2,597
49
votes
8
answers
88k
views
Retrieve latitude and longitude of a draggable pin via Google Maps API V3
I will explain. I managed to have a draggable pin on a map. I want to retrieve the coordinates of this point and put them into two fields: Latitude and Longitude. These coordinates will later be send ...
- 664
48
votes
4
answers
88k
views
HTML5, JavaScript: Drag and Drop File from External Window (Windows Explorer)
Can I kindly ask for a good working example of HTML5 File Drag and Drop implementation? The source code should work if drag and drop is performed from external application(Windows Explorer) to browser ...
- 4,738
43
votes
3
answers
15k
views
How to create a draggable legend in matplotlib?
I'm drawing a legend on an axes object in matplotlib but the default positioning which claims to place it in a smart place doesn't seem to work. Ideally, I'd like to have the legend be draggable by ...
- 6,545
41
votes
10
answers
40k
views
jQuery Drag And Drop Using Live Events
I have an application with a long list that changes frequently, and I need the items of that list to be draggable.
I've been using the jQuery UI draggable plugin, but it is slow to add to 400+ list ...
- 4,880
40
votes
7
answers
36k
views
How to start mouseover event while dragging
When I drag an element over another div on which I have a mouseover event, the event doesn't trigger. However, it works if I hover over it without dragging.
Is there a way to detect hover events on ...
- 1,687
37
votes
7
answers
28k
views
html5 draggable hide original element
When starting to drag an element using HTML5 draggable attribute, original element is still visible, so I end up having two elements visible instead of one.
How can I do to have only the element ...
- 5,720
37
votes
4
answers
45k
views
How can I detect a rightmouse button event on mousedown?
I am updating/debugging and expanding the capabilities of my draggable script and I need to be able to achieve the following result:
whatever.onRightMouseButtonMousedown = preventDefault();
I have ...
- 1,338
36
votes
4
answers
55k
views
How do I make an element draggable in jQuery?
How do I make an element, e.g. a div, draggable using jQuery?
- 65.7k
35
votes
6
answers
65k
views
Setting z-index on draggable elements
I am trying to set the z-index on draggable elements using jQuery. You can see what I am talking about and what I have so far here:
http://jsfiddle.net/sushik/LQ4JT/1/
It is very primitive and there ...
- 12.8k
35
votes
2
answers
6k
views
Why is clientX reset to 0 on last drag-event and how to solve it?
I'm trying to drag elements along a line. They should push each other, not cross over or under.
To avoid having a shady element float around on drag, I drag a sub-div which then affects the position ...
- 1,304
32
votes
2
answers
42k
views
jQuery UI Draggable not working on ios devices
I am using .draggable (part of jQuery UI) to allow users to move items around as part of a simple web app. It works fine on all the latest desktop browsers for OSX & Windows (except Windows Safari,...
- 9,896
32
votes
6
answers
14k
views
dragend, dragenter, and dragleave firing off immediately when I drag
I'm trying to make a list of elements which can be repositioned by dragging and dropping. The first element, Box 1, works just fine 100% of the time. Sometimes the second box works, but none of the ...
- 343
31
votes
7
answers
73k
views
jQuery draggable + droppable: how to snap dropped element to dropped-on element
I have my screen divided into two DIVs. In the left DIV I have a few 50x50 pixel DIVs, in the right DIV I have an empty grid made of 80x80 LIs. The DIVs on the left are draggable, and once dropped on ...
- 926
31
votes
1
answer
20k
views
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode
Draggable package is causing an error in strict mode:
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was
passed an instance of DraggableCore which is inside StrictMode.
Instead, add a ...
- 1,979
31
votes
5
answers
22k
views
How to check if an element is droppable, draggable or other 'ble'?
I've got a bunch of elements with jQuery. Some are draggable, some are droppable and some are both. How can I detect if an element is draggable or droppable?
- 33k
29
votes
1
answer
27k
views
How to make <div>s in HTML5 draggable for Firefox?
I am playing around with the HTML5 features, and I want div's (and similar containers like articles, sections, etc.) to be draggable. Consider the following code:
<!DOCTYPE html>
<html>
&...
- 301
29
votes
4
answers
40k
views
Make HTML5 draggable items scroll the page?
I'm using the HTML5 attribute draggable = "true" on some of my divs on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you ...
- 1,971
28
votes
4
answers
23k
views
Is there a JQuery plugin which combines Draggable and Selectable
I'm looking to implement a web interface with a number of items which can be selected and dragged around to position them, either in groups or singly. Rather like the Windows Desktop, really.
We're ...
- 39.4k
27
votes
2
answers
21k
views
Swing: Creating a draggable component...?
I searched the web for examples of draggable Swing components,
but I found either incomplete or non-working examples.
What I need is a Swing component that can be dragged by the mouse
inside an other ...
- 19.3k
25
votes
4
answers
6k
views
Rounded corners with HTML "draggable"
I am using the "draggable" attribute and find not all browsers render the element the same way while it is being dragged. Specifically, the background color sometimes is taken from the parent element (...
- 542
25
votes
3
answers
29k
views
Controlling the appearance of the HTML5 drag and drop effect
Is there a way to control the appearance of "what you are dragging" using the HTML5 Drag and Drop APIs?
Normally, whatever HTML element is draggable is what becomes semi-transparent and follows your ...
user358089
24
votes
2
answers
31k
views
jQuery: How Do I simulate Drag and Drop in Code?
EDIT: Here's a link to show you my sample code: http://www.singingeels.com/jqtest/
I have a very simple page that references jquery-1.3.2.js, ui.core.js (latest version) and ui.draggable.js (also ...
- 31.7k
24
votes
4
answers
4k
views
Draggable button in Firefox
Is it possible to make a <button> (<input type="button">) work with HTML5 drag and drop in Mozilla Firefox (while still being clickable)?
The following snippet works in Google Chrome but ...
- 2,052
23
votes
3
answers
26k
views
How to get the position after drop with cdkDrag?
Hi I need to be able to drag and drop some html elements but I need to know the end position of the drop.
using the cdkDrag directive I see from the docs that there's an event cdkDragEnded.
This is ...
- 2,452
23
votes
4
answers
19k
views
HTML5 draggable='false' not working in Firefox browser
I'm simply trying to apply HTML5 draggable='false' attribute to some images but it's not working in Firefox browser. In Chrome working fine but on Firefox, after selecting that image able to drag and ...
- 1,048
23
votes
3
answers
14k
views
How do I make a ReorderableListView ListTile draggable on button/icon press for Flutter?
So I saw the ReorderableListView demo and saw that they had the
"secondary: const Icon(Icons.drag_handle)"
but looking at the reorderable_list.dart file, I noticed that the entire list was ...
- 850
22
votes
5
answers
70k
views
HTML5 UL LI Draggable
I have an unordered list:
List item 1
List item 2
List item 3
List item 4
List item 5
Implemented with this code:
<ul>
<li>List item 1</li>...
- 450
22
votes
5
answers
46k
views
How do I make a div width draggable?
I have a div nested inside another div which is used to display a settings console. The nested div has a fixed positioned inside the parent as follows:
I'd like to add a draggable handle to the child ...
- 8,928
22
votes
4
answers
62k
views
Change position of divs with jquery drag an drop
I'm trying to build a website where the user can drag some items (one item in on div) to other divs on the page. It' not a table or so, just divs somewhere on the page.
With html5 drag&drop it ...
- 225
21
votes
3
answers
26k
views
clone node on drag
i want to be able to create a copy of the element that i want to drag. im using the standard ui draggable and droppable. i know about the helper clone option. but that does not create a copy. the ...
- 1,217
21
votes
2
answers
29k
views
Trigger :hover selector when dragging
I'm having kind of an issue about a drag & drop system I'm currently developing.
I have a :hover style on a div the user can drop something on.
It works when I simply hover over it, but not when ...
- 12.8k
21
votes
6
answers
21k
views
JQuery Draggable and Resizeable over IFrames (Solution)
I recently ran into some troubles using JQuery Draggable and Resizable plugins. Looking for solutions, i found some very fragmented code in many different places and finally filed down to a clean ...
- 3,074
20
votes
1
answer
17k
views
Dragging a Div in jQuery - fine when mouse is slow, but fails on fast mouse movement
I want to drag a div around using my own jQuery code.
This example on jsfiddle works fine when the mouse movements are slow
http://jsfiddle.net/craic/kr7Un/
But any fast movement pulls the mouse ...
- 3,856
19
votes
5
answers
8k
views
No possibility to select text inside <input> when parent is draggable
This one is IE specific (not anymore, apparently). We have very simple code:
<div draggable="true">
<p>Text</p>
<input type="text"/>
</div>
On Chrome it works ...
- 3,175
18
votes
1
answer
1k
views
Calculating window dragging and skewing in JavaScript
I am using JavaScript and trying to make a skew effect on a div.
First, take a look at this video: http://www.youtube.com/watch?v=ny5Uy81smpE (0:40-0:60 should be enough). The video shows some nice ...
- 101k
18
votes
5
answers
2k
views
Word-wrap: break-down not working. Text overflow issue in draggable element
Please help to solve this issue. Currently I have a div, that is draggable and the text inside is editable. And here the user can change the text size using input type range.
Is it possible to hide ...
user5742826
18
votes
3
answers
8k
views
How to limit draggable scrollable sheet to take height according to its child height in flutter?
I am using draggableScrollableSheet. I am giving these parameters
DraggableScrollableSheet(initialChildSize: 0.4,maxChildSize: 1,minChildSize: 0.4,builder: (BuildContext context, ScrollController ...
- 1,827
17
votes
5
answers
33k
views
Jquery UI Draggable: Align helper to mouse position
With jQuery I have a draggable element. It's a div with a size of 200 x 40.
Of course the user can start dragging this div by clicking at variuos positions in the div.
What I want is when the ...
- 6,105
17
votes
8
answers
33k
views
how do i make dynamically created elements draggable()?
I'm trying to figure out how to make dynamically created divs draggable, so I've created this very simple thing to help me. I understand that I have to use the on() event with a non-dynamic handler. ...
