Databases
StackOverflow2013
Postsdbo
POJQuery drag/drop swap
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery drag/drop swap
    text
    copied!<p>I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.</p> <p>I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; #wrapper { border: thin dotted orange; } &lt;/style&gt; &lt;script type="text/javascript"&gt; jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(); var copy_from = $(this).clone(); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = { revert: true, helper: 'clone' }; $("li").draggable(options); $('#wrapper').droppable({ drop: function(event, ui) { // window.setTimeout(function(){ $('#one').swapWith($('#two')); $(".ui-draggable-dragging").remove(); $("li").draggable(options); //}, 1); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;ul id="wrapper"&gt; &lt;li id='one'&gt; &lt;div style="width: 100px; height: 100px; border: 1px solid green"&gt; one&lt;br /&gt;&lt;/div&gt; &lt;/li&gt; &lt;li id='two'&gt; &lt;div style="width: 110px; height: 110px; border: 1px solid red"&gt; two&lt;br /&gt;&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;br /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload