Databases
StackOverflow2013
Postsdbo
POMultiple draggable droppable and sortable jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple draggable droppable and sortable jQuery
    text
    copied!<p>I checked these:</p> <p><a href="https://stackoverflow.com/questions/16118853/jquery-draggable-droppable-and-sortable-combined">Jquery draggable/droppable and sortable combined</a></p> <p><a href="https://stackoverflow.com/questions/11141723/jquery-ui-sortable-and-draggable-sortable-and-droppable">jQuery UI: sortable and draggable + sortable and droppable</a></p> <p><a href="https://stackoverflow.com/questions/8406258/jquery-draggable-droppable-sortable">JQuery Draggable + Droppable + Sortable</a></p> <p>So, answers are none of these.</p> <p><strong>Theory</strong></p> <ul> <li>I have 2 elements, UL and OL.</li> <li>List items of UL has to go in OL</li> <li>OL is sortable</li> </ul> <p><strong>Problem</strong></p> <ul> <li>I have multiple such UL and OL on single page.</li> <li>I need to make sure that List Items of a UL does not enter OL of other section.</li> </ul> <p><strong>What have you tried ?</strong></p> <pre><code>$(function() { $( ".fetchedfromdb li" ).draggable({ appendTo: "body", helper: "clone", drag: function(){ $(".sortintodb ol").droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function(event, ui) { $( this ).find( ".placeholder" ).remove(); $( "&lt;li&gt;&lt;/li&gt;" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ sort: function() { $( this ).removeClass( "ui-state-default" ); } }); } }); }); </code></pre> <p><strong>My COdeIgniter part:</strong></p> <pre><code>&lt;?php echo form_open('/data/process'); echo form_label('yep') . form_textarea('remarks'); foreach($dataFetched as $data =&gt; $field) { echo "&lt;h2&gt;$data&lt;/h2&gt; \n &lt;ul class='fetchedfromdb'&gt;"; foreach($field as $f): $fieldFetch = $data.'_1_1'; echo '&lt;li&gt;'.$f-&gt;$fieldFetch.'&lt;/li&gt;'; echo "&lt;br /&gt;"; endforeach; echo '&lt;/ul&gt;'; echo '&lt;div style="background-color: #c3c3c3; height:100px"&gt;'; echo "&lt;ol class=\"sortintodb\" id=\"$data\"&gt;"; echo '&lt;li class="placeholder"&gt;Drop here&lt;/li&gt; &lt;/ol&gt; &lt;/div&gt;&lt;hr /&gt;'; } echo form_submit('submit','Submit'); echo form_close(); ?&gt; </code></pre> <p>via CSS I have made sure that every output till parent foreach ends comes under same section</p> <p>Any ideas about how can this be implemented?</p> <p>Any help, much appreciated. Thank you :)</p> <p>'Visual' representation of what we are looking at...</p> <p><img src="https://i.stack.imgur.com/RFX7e.png" alt="Isolated multiple drag and drop with sort"></p>
 

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