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
1
vote
1 answer

jquery touch punch z index has no impact

I am working on ipad drag and drop and i tried to make the draggable element visible on every other div but it works only in parent div, my code is: $('#draggable').draggable({ zIndex: 20, drag: function(event){...}, helper: 'clone', …
embergal
  • 159
  • 2
  • 7
1
vote
1 answer

jquery draggable - Get containment to only contain handle

I'm using jQuery UI's draggable() to make some elements on my page draggable. I've got a handler and a containment set for the elements, but I'd like the draggable element itself to be able to hang out of the containment. I only want the handle to…
John
  • 452
  • 2
  • 14
1
vote
1 answer

Draggable object goes outside the container when the window is resized

I try to made a custom scrollbar using the drag&drop/draggable function in JQueryUI I made this JSFiddle: http://jsfiddle.net/96k2ysbf/1/ HTML
CSS .w85pc{ width:…
Pascal Goldbach
  • 977
  • 1
  • 15
  • 34
1
vote
2 answers

input text is being displayed double in divs

can someone please help me? i have been trying for days but this has not been working properly my problem is that when i try to enter some text it is being displayed double one in each div if you need further explanation please ask. try typing…
fidel
  • 89
  • 1
  • 9
1
vote
1 answer

How to make draggable false with condition in case_kanban_view odoo

Is it possible to make draggable event False with condition in kanban view crm module? I want to drag leads from any stage except stage won (probability=100) I tried this but in vain: {'edit':…
Fatiluna
  • 31
  • 8
1
vote
2 answers

Angular Gridster : Resize Widget

Hi is there a way where I can resize the widget using angular-gridster. I know gridster (not angular version) has a function for it like this: gridster.resize_widget(widget,6,6) I don't know how to do it using angular-gridster
chitcharonko
  • 331
  • 2
  • 6
  • 18
1
vote
0 answers

Angular-gridster: on drop listerner

Is there a way to find out whenever an item has been dropped? I found a snippet in their documentation, but i don't know if this is what I'm looking for. I tried using it but then I don't have any luck. The…
chitcharonko
  • 331
  • 2
  • 6
  • 18
1
vote
1 answer

How to make draggable transparent?

i would like to know how to make a draggable transparent. Currently the background is white. Here's my website: http://amp.site88.net/ this is my code: jQuery UI Draggable - Default…</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/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</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 08 '16 at 02:44">asked May 08 '16 at 02:44</time> <a href="../../users/6249028/johndoe" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6249028.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="johndoe" /> </a> <div class="s-user-card--info"> <a href="../../users/6249028/johndoe" class="s-user-card--link">johndoe</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">45</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-37047198"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/37047198/bootstrap-and-jquery-draggable" class="question-hyperlink">Bootstrap and JQuery draggable</a></h3> <div class="excerpt">I'm creating a website that will allow a user to search through an object of courses. Once a course is selected from a typeahead search it is added to a basket. From that basket I will allow the user to drag and drop the course to a desired semester…</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/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a> <a href="../../questions/tagged/jquery-ui" class="post-tag grid--cell" title="show questions tagged 'jquery-ui'" rel="tag">jquery-ui</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 05 '16 at 09:36">asked May 05 '16 at 09:36</time> <a href="../../users/2302843/zeliax" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2302843.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Zeliax" /> </a> <div class="s-user-card--info"> <a href="../../users/2302843/zeliax" class="s-user-card--link">Zeliax</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,987</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="51 silver badges">51</li> <li class="s-award-bling s-award-bling__bronze" title="79 bronze badges">79</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-36903694"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/36903694/draggable-true-preview-hides-children-that-are-position-absolute" class="question-hyperlink">draggable="true" preview hides children that are position:absolute?</a></h3> <div class="excerpt">Here is a demonstration: Top: child <div> is visible in the drag preview Bottom: child <div> is not visible in the drag preview .absolute { position: absolute; } .draggable { position: relative; height: 60px; border: 1px solid…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/position" class="post-tag grid--cell" title="show questions tagged 'position'" rel="tag">position</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 28 '16 at 01:29">asked Apr 28 '16 at 01:29</time> <a href="../../users/554406/jchook" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/554406.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jchook" /> </a> <div class="s-user-card--info"> <a href="../../users/554406/jchook" class="s-user-card--link">jchook</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,690</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="38 silver badges">38</li> <li class="s-award-bling s-award-bling__bronze" title="40 bronze badges">40</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-36862453"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/36862453/highcharts-draggable-plotline-with-logarithmic-axis-scale" class="question-hyperlink">HighCharts Draggable Plotline with Logarithmic axis scale</a></h3> <div class="excerpt">I have a simple Line chart using HighCharts & trying to add draggable plotlines in it. $(function () { function draggablePlotLine(axis, plotLineId) { var clickX, clickY; var getPlotLine = function () { for (var i = 0; i <…</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/highcharts" class="post-tag grid--cell" title="show questions tagged 'highcharts'" rel="tag">highcharts</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> <a href="../../questions/tagged/linechart" class="post-tag grid--cell" title="show questions tagged 'linechart'" rel="tag">linechart</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 26 '16 at 10:36">asked Apr 26 '16 at 10:36</time> <a href="../../users/350705/karthikeyan" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/350705.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Karthikeyan" /> </a> <div class="s-user-card--info"> <a href="../../users/350705/karthikeyan" class="s-user-card--link">Karthikeyan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">506</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="8 silver badges">8</li> <li class="s-award-bling s-award-bling__bronze" title="20 bronze badges">20</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-3662955"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/3662955/how-to-make-a-custom-overlays-draggable-using-google-maps-v3" class="question-hyperlink">how to make a Custom Overlays draggable using google-maps v3 </a></h3> <div class="excerpt">the marker can drag , so the Custom Overlays can drag too , so how to make the Custom Overlays draggable , thanks </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/google-maps" class="post-tag grid--cell" title="show questions tagged 'google-maps'" rel="tag">google-maps</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> <a href="../../questions/tagged/overlay" class="post-tag grid--cell" title="show questions tagged 'overlay'" rel="tag">overlay</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 07 '10 at 21:36">asked Sep 07 '10 at 21:36</time> <a href="../../users/420840/zjm1126" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/420840.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="zjm1126" /> </a> <div class="s-user-card--info"> <a href="../../users/420840/zjm1126" class="s-user-card--link">zjm1126</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">34,604</li> <li class="s-award-bling s-award-bling__gold" title="53 gold badges">53</li> <li class="s-award-bling s-award-bling__silver" title="121 silver badges">121</li> <li class="s-award-bling s-award-bling__bronze" title="166 bronze badges">166</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-3657846"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/3657846/javascript-how-to-ignore-minor-dragging-events" class="question-hyperlink">JavaScript - how to ignore minor dragging events?</a></h3> <div class="excerpt">I have a draggable image within a div. I can click on the image to bring up a pop-up menu, which works fine. Quite often when I click on the image I drag it by about 1-5 pixels, therefore on click event doesn't get fired up, instead, a dragstart…</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/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</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__deleted"> <time class="s-user-card--time" datetime="asked Sep 07 '10 at 10:37">asked Sep 07 '10 at 10:37</time> <div class="s-avatar s-avatar__32 s-user-card--avatar"> </div> <div class="s-user-card--info">user338195</div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-36452837"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/36452837/how-to-drag-and-align-an-item-in-android-custom-view" class="question-hyperlink">How to drag and align an item in Android custom view?</a></h3> <div class="excerpt">I created this custom view to add a layer at the top of app There is a draggable circle in the view public class LockView extends View { public LockView(Context context) { super(context); setClickable(true); …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/android" class="post-tag grid--cell" title="show questions tagged 'android'" rel="tag">android</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/android-view" class="post-tag grid--cell" title="show questions tagged 'android-view'" rel="tag">android-view</a> <a href="../../questions/tagged/draggable" class="post-tag grid--cell" title="show questions tagged 'draggable'" rel="tag">draggable</a> <a href="../../questions/tagged/android-custom-view" class="post-tag grid--cell" title="show questions tagged 'android-custom-view'" rel="tag">android-custom-view</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 06 '16 at 13:37">asked Apr 06 '16 at 13:37</time> <a href="../../users/963844/cl-so" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/963844.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="CL So" /> </a> <div class="s-user-card--info"> <a href="../../users/963844/cl-so" class="s-user-card--link">CL So</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,647</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="51 silver badges">51</li> <li class="s-award-bling s-award-bling__bronze" title="95 bronze badges">95</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-36364480"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/36364480/over-event-isn-t-propagated-if-nested-droppable-doesn-t-accept-draggable-under" class="question-hyperlink">Over event isn't propagated if nested droppable doesn't accept draggable under a certain scenario</a></h3> <div class="excerpt">The steps below are applicable to the jsFiddle shared below. Steps: Click on and drag Draggable 1 onto the inner droppable of Droppable 3. Continue to hold Draggable 1, do not release it. Note that when Draggable 1 is on the inner droppable and the…</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/jquery-ui" class="post-tag grid--cell" title="show questions tagged 'jquery-ui'" rel="tag">jquery-ui</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 Apr 01 '16 at 19:32">asked Apr 01 '16 at 19:32</time> <a href="../../users/930940/deepankar" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/930940.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Deepankar" /> </a> <div class="s-user-card--info"> <a href="../../users/930940/deepankar" class="s-user-card--link">Deepankar</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">48</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</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=99" rel="prev" title="Go to page 99">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/draggable_page=2" rel="" title="Go to page 2">2</a> <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> <div class="s-pagination--item is-selected">100</div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>