Stack Overflow
Stack Overflow

Questions tagged [draggable]

An element capable of being dragged.

In computer science usually an element is draggable if can be picked using mouse (or another pointing device) and moved around on the screen (or another visualization device).

The term is usually used jointly with the term drop to indicate the sequence needed to pick an object, move it around and then release it in a new position to perform an action.

References:

3630 questions
39
votes
7 answers

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 an element if I drag another one over it?
V.Rashkov
  • 1,527
  • 4
  • 18
  • 31
36
votes
7 answers

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 being dragged visible (the original one should be…
julesbou
  • 5,570
  • 4
  • 31
  • 36
36
votes
4 answers

How do I make an element draggable in jQuery?

How do I make an element, e.g. a div, draggable using jQuery?
zjm1126
  • 63,397
  • 81
  • 173
  • 221
35
votes
4 answers

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 done a lot of research to no avail, however, I know…
person0
  • 1,278
  • 2
  • 15
  • 20
34
votes
6 answers

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 are problems with it. Any ideas on how I would…
Zac
  • 12,637
  • 21
  • 74
  • 122
33
votes
2 answers

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 of the outer one. Works fine except when you…
primavera133
  • 1,284
  • 1
  • 15
  • 24
32
votes
2 answers

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, where it only moves the items vertically for some…
sam
  • 9,486
  • 36
  • 109
  • 160
31
votes
5 answers

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?
Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
31
votes
6 answers

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 others work as expected. They seem to fire off all…
Bill
  • 333
  • 1
  • 3
  • 5
31
votes
7 answers

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 a LI, they should snap to center of that…
10goto10
  • 896
  • 1
  • 8
  • 10
29
votes
1 answer

How to make

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: A Simple Draggable…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/firefox" class="post-tag grid--cell" title="show questions tagged 'firefox'" rel="tag">firefox</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 20 '10 at 12:10">asked Oct 20 '10 at 12:10</time> <a href="../../users/481654/hdm" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/481654.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="HdM" /> </a> <div class="s-user-card--info"> <a href="../../users/481654/hdm" class="s-user-card--link">HdM</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">301</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="3 silver badge">3</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badge">4</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-18809678"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>29</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/18809678/make-html5-draggable-items-scroll-the-page" class="question-hyperlink">Make HTML5 draggable items scroll the page?</a></h3> <div class="excerpt">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 drag it to the top, it scrolls the page up. I will…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 15 '13 at 06:46">asked Sep 15 '13 at 06:46</time> <a href="../../users/850962/jas7457" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/850962.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jas7457" /> </a> <div class="s-user-card--info"> <a href="../../users/850962/jas7457" class="s-user-card--link">jas7457</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,971</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="30 silver badges">30</li> <li class="s-award-bling s-award-bling__bronze" title="47 bronze badges">47</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-705250"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>28</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>4</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable" class="question-hyperlink">Is there a JQuery plugin which combines Draggable and Selectable</a></h3> <div class="excerpt">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 using JQuery already, so additions to that would…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 01 '09 at 12:22">asked Apr 01 '09 at 12:22</time> <a href="../../users/987/will-dean" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/987.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Will Dean" /> </a> <div class="s-user-card--info"> <a href="../../users/987/will-dean" class="s-user-card--link">Will Dean</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">39,055</li> <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li> <li class="s-award-bling s-award-bling__silver" title="90 silver badges">90</li> <li class="s-award-bling s-award-bling__bronze" title="118 bronze badges">118</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-874360"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>27</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/874360/swing-creating-a-draggable-component" class="question-hyperlink">Swing: Creating a draggable component...?</a></h3> <div class="excerpt">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 component. While being dragged, it should already…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/java" class="post-tag grid--cell" title="show questions tagged 'java'" rel="tag">java</a> <a href="../../questions/tagged/swing" class="post-tag grid--cell" title="show questions tagged 'swing'" rel="tag">swing</a> <a href="../../questions/tagged/drag-and-drop" class="post-tag grid--cell" title="show questions tagged 'drag-and-drop'" rel="tag">drag-and-drop</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 17 '09 at 10:56">asked May 17 '09 at 10:56</time> <a href="../../users/76393/ivan-ivanovich-ivanoff" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/76393.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ivan_ivanovich_ivanoff" /> </a> <div class="s-user-card--info"> <a href="../../users/76393/ivan-ivanovich-ivanoff" class="s-user-card--link">ivan_ivanovich_ivanoff</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">19,113</li> <li class="s-award-bling s-award-bling__gold" title="27 gold badges">27</li> <li class="s-award-bling s-award-bling__silver" title="81 silver badges">81</li> <li class="s-award-bling s-award-bling__bronze" title="100 bronze badges">100</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-63603902"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>24</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/63603902/finddomnode-is-deprecated-in-strictmode-finddomnode-was-passed-an-instance-of-" class="question-hyperlink">findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode</a></h3> <div class="excerpt">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 ref directly to the element you want to…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> <a href="../../questions/tagged/react-strictmode" class="post-tag grid--cell" title="show questions tagged 'react-strictmode'" rel="tag">react-strictmode</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 26 '20 at 18:48">asked Aug 26 '20 at 18:48</time> <a href="../../users/1341289/francesco-orsi" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1341289.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Francesco Orsi" /> </a> <div class="s-user-card--info"> <a href="../../users/1341289/francesco-orsi" class="s-user-card--link">Francesco Orsi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,739</li> <li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li> <li class="s-award-bling s-award-bling__silver" title="16 silver badges">16</li> <li class="s-award-bling s-award-bling__bronze" title="32 bronze badges">32</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=1" rel="prev" title="Go to page 1">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=1" rel="" title="Go to page 1">1</a> <div class="s-pagination--item is-selected">2</div> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=99" rel="" title="Go to page 99">99</a> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=100" rel="" title="Go to page 100">100</a> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=3" rel="next" title="Go to page 3"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>