Stack Overflow
Stack Overflow

Questions tagged [jquery-droppable]

The jQuery UI Droppable plugin makes selected elements droppable so they accept being dropped on by draggables.

The Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

API Documentation

77 questions
2
votes
2 answers

jquery drop div on multiple droppable tds but use only highest

I'm quite new to JavaScript and JQuery and hope you can help me with my problem. I want to drop a div over several smaller tr and get the highest one covered by the div. But it seems that JQuery selects the tr at the center of the div. Is there an…
Rikan
  • 155
  • 9
2
votes
1 answer

How to retain the format ,when Drag and drop of a object from one div to another div

When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format and style i.e 'li' after droping it. $(function() { $("#catalog ul").sortable({ zIndex: 10000, …
Little bird
  • 1,106
  • 7
  • 28
  • 58
1
vote
0 answers

How to get dragged and dropped row ids?

I have two tables, where I should be able to drag and drop row from any one to other. While dropping I have to get the values of dropped row's columns and do some addition and subtraction to some of the column values. Below is what I'm trying…
Bab
  • 85
  • 1
  • 12
1
vote
1 answer

jQuery droppable DOM event order

I have two listeners. One is the droppable class from jquery UI $("#myDiv").droppable({ drop: function( event, ui ) { console.log('I happened'); if (window.draggingMove == true) { alert('I want to get here but I…
Dave Chenell
  • 601
  • 1
  • 8
  • 23
1
vote
3 answers

Remove cloned image after adding another image with jQuery UI

I have a nice solution from my previous question that successfully clones images after being dropped. Here is the code: $(function() { var makeDraggable = function(element) { element.draggable({ revert: "invalid", appendTo:…
Saifullah Alam
  • 301
  • 2
  • 11
1
vote
0 answers

Contextmenu and DragnDrop on right click using jquery easyUI

I have integrated jQuery easyUI plugin for Treegrid (editable and drag n drop feature). All the features has been successfully implemented. There's one feature of behaving as "When a user right click it should the "Custom Context menu" that is done,…
Prashant Kankhara
  • 1,498
  • 4
  • 15
  • 30
1
vote
0 answers

How to use droppable function of jQuery to a transformed div?

$(function(){ $('#dragTbl tr').draggable({ cursor:"move", zIndex: 100, cursorAt: {top:20, left:38, bottom:15 }, iframeFix: true, helper: function( event ) { return $( "
"+…
Srilakshmi B S
  • 21
  • 1
  • 5
1
vote
2 answers

jQuery Droppable - Not able to remove Cloned Element

I am using jQuery UI Droppable... I need a same functionality like Drag and Drop for clicking on star icon from Draggable, it has to add to the Droppable container. Which I tried successfully. But, When I am trying to remove
  • element from the…
    • Reddy
    • 1,477
    • 29
    • 79
    1
    vote
    0 answers

    jQuery Droppable - Add CSS Class to Dragged Element

    Can somebody please help me out with below query please? I am using jQuery Droppable shopping Cart Demo UI.. Once I drag the element from catalog section, I want to add css class to the relevant
  • tag. Eg: after dropping the "Lolcat Shirt" from…
    • Reddy
    • 1,477
    • 29
    • 79
    1
    vote
    2 answers

    jquery droppable is not working

    Guys. I spent few hours just for checking my jquery, why it doesn't work well. Just confused why droppable function doesn't firing alert when the square div has dropped into box's div. Here is my html jquery - draggable…</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/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 22 '14 at 08:32">asked Sep 22 '14 at 08:32</time> <a href="../../users/2924335/sonic-master" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2924335.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sonic Master" /> </a> <div class="s-user-card--info"> <a href="../../users/2924335/sonic-master" class="s-user-card--link">Sonic Master</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,238</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="22 silver badges">22</li> <li class="s-award-bling s-award-bling__bronze" title="36 bronze badges">36</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-25927054"> <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/25927054/jquery-drag-drop-and-clone-proper-positioning" class="question-hyperlink">Jquery drag, drop and clone proper positioning</a></h3> <div class="excerpt">UPDATED Fiddle Here: jsfiddle here full-screen-result NOTE: I am new to fiddle, and somehow I integrated my code to fiddle, but drag drop is not working on it. Hi I have implemented drag, drop and clone feature with the help of jquery draggable and…</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/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/jquery-draggable" class="post-tag grid--cell" title="show questions tagged 'jquery-draggable'" rel="tag">jquery-draggable</a> <a href="../../questions/tagged/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 19 '14 at 05:36">asked Sep 19 '14 at 05:36</time> <a href="../../users/2553311/przbadu" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2553311.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="przbadu" /> </a> <div class="s-user-card--info"> <a href="../../users/2553311/przbadu" class="s-user-card--link">przbadu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,769</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="42 silver badges">42</li> <li class="s-award-bling s-award-bling__bronze" title="67 bronze badges">67</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-24909290"> <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>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/24909290/how-to-make-jquery-droppable-aply-hoverclass-exactly-when-mouse-on-droppable-a" class="question-hyperlink">How to make jquery droppable aply hoverClass exactly when mouse on droppable area?</a></h3> <div class="excerpt">Hover class applied when mouse pointer on the center of droppable area. What should I do to apply hover class at same time when mouse pointer crosses the border. On image 1. Mouse already on droppable area but hover class is still not applied. 2.…</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/jquery-ui-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-ui-droppable'" rel="tag">jquery-ui-droppable</a> <a href="../../questions/tagged/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 23 '14 at 11:29">asked Jul 23 '14 at 11:29</time> <a href="../../users/1083777/radislav" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1083777.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Radislav" /> </a> <div class="s-user-card--info"> <a href="../../users/1083777/radislav" class="s-user-card--link">Radislav</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,892</li> <li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</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="61 bronze badges">61</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-24315488"> <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>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/24315488/problems-with-jquery-ui-droppable-area" class="question-hyperlink">Problems with jquery-ui droppable area</a></h3> <div class="excerpt">I'm having some issues with my droppable area in my code. Everything is firing correctly and working as it should; however, the area in which I can effectively drop the numbered circles is not aligned correctly. It is hard to explain so here is the…</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/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/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 19 '14 at 20:12">asked Jun 19 '14 at 20:12</time> <a href="../../users/3757770/user3757770" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3757770.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user3757770" /> </a> <div class="s-user-card--info"> <a href="../../users/3757770/user3757770" class="s-user-card--link">user3757770</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-22807799"> <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>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/22807799/angularjs-jquery-droppable" class="question-hyperlink">AngularJS - jQuery Droppable</a></h3> <div class="excerpt">I am running into an issue implementing a simple jQuery droppable in an AngularJS app. For some reason, the code is working on a standalone page I set up on Fiddle: http://jsfiddle.net/65FMq/3/ However, for some reason when I add the same code in…</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/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</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/jquery-draggable" class="post-tag grid--cell" title="show questions tagged 'jquery-draggable'" rel="tag">jquery-draggable</a> <a href="../../questions/tagged/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 02 '14 at 09:57">asked Apr 02 '14 at 09:57</time> <a href="../../users/1809790/user1809790" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1809790.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user1809790" /> </a> <div class="s-user-card--info"> <a href="../../users/1809790/user1809790" class="s-user-card--link">user1809790</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,349</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="24 silver badges">24</li> <li class="s-award-bling s-award-bling__bronze" title="53 bronze badges">53</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-20704090"> <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>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/20704090/jquery-dragable-on-button-helper-option-not-working" class="question-hyperlink">JQuery Dragable on button, helper option not working</a></h3> <div class="excerpt">I want to drag button from one div to other. I'm using helper option "clone" but my original button are now dragging. i want to perform a task in that when dragging stops I want to remove clone object and create different element in the same…</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/jquery-draggable" class="post-tag grid--cell" title="show questions tagged 'jquery-draggable'" rel="tag">jquery-draggable</a> <a href="../../questions/tagged/jquery-droppable" class="post-tag grid--cell" title="show questions tagged 'jquery-droppable'" rel="tag">jquery-droppable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 20 '13 at 12:55">asked Dec 20 '13 at 12:55</time> <a href="../../users/1401138/muak" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1401138.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="muak" /> </a> <div class="s-user-card--info"> <a href="../../users/1401138/muak" class="s-user-card--link">muak</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">189</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_page=1" rel="prev" title="Go to page 1">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_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/jquery-droppable_page=3" rel="" title="Go to page 3">3</a> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_page=4" rel="" title="Go to page 4">4</a> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_page=5" rel="" title="Go to page 5">5</a> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_page=6" rel="" title="Go to page 6">6</a> <a class="s-pagination--item" href="../../questions/tagged/jquery-droppable_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>