Databases
StackOverflow2013
Postsdbo
POmany draggable to many droppable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmany draggable to many droppable
    text
    copied!<p>I am developing an app having UI which is used for mapping fields (Source => Destination). These fields would appear in UL -> LI -> DIV</p> <p>The lists are going to be created dynamically by PHP.</p> <p>Source fields are draggable with revert:true, where as Destination fields (droppable) would accept source field. I know the accept : "#divsource"</p> <p>I am able to make many div's draggable, but my problem is how to define many LI->Div as droppable.</p> <p>At then end the drop event would call ajax and that I can handle as well.</p> <p>I am new to jQuery and whatever I have learned till now is with this task is all I know. But, my quick learning ability is not a problem.</p> <p>Please help with some example.</p> <p>thanks Wikki</p> <p>Below code is something I have been playing with. I know it's bit far off from what eventually it should look like:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.srcfield').draggable({ revert: true, helper: "clone" }); $('#destinationfeilds').droppable({ accept : ".srcfield", over: function(){ $(this).removeClass('out').addClass('over'); }, out: function(){ $(this).removeClass('over').addClass('out'); }, drop: function(ev, ui){ //var answer = confirm('Delete this item?'); var theTitle = $(ui.draggable).attr("title"); $(this).html("&lt;u&gt;"+theTitle+"&lt;/u&gt;&lt;br/&gt; is mapped!"); //$(this).removeClass('over').addClass('out'); //alert(theTitle); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="destinationfeilds" class="out"&gt; &lt;span&gt;Destination&lt;/span&gt; &lt;/div&gt; &lt;div id="destinationfeilds" class="out"&gt; &lt;span&gt;Destination&lt;/span&gt; &lt;/div&gt; &lt;div id="sourcefields"&gt; &lt;div class="srcfield" title="First Name"&gt;&lt;span&gt;First Name&lt;/span&gt;&lt;/div&gt; &lt;div class="srcfield" title="Last Name"&gt;&lt;span&gt;Last Name&lt;/span&gt;&lt;/div&gt; &lt;div class="srcfield" title="Age"&gt;&lt;span&gt;Age&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&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