Databases
StackOverflow2013
Postsdbo
POjQuery draggable revert based on condition
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery draggable revert based on condition
    primarykey
    data
    text
    <p>I am having an issue related jQuery draggable and droppable. Here is description something what I want to do.</p> <p><strong>First:</strong> I have two divs. One is <code>&lt;div id="selected"&gt;</code> and another is <code>&lt;div id="container"&gt;</code>. "container" has 10 <code>&lt;li&gt;</code> which are draggable and droppable into "selected". Here is code:</p> <pre><code>&lt;div id="selected"&gt; &lt;ul class="sortable-list"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;ul class="sortable-list"&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;....&lt;/li&gt; &lt;li&gt;9&lt;/li&gt; &lt;li&gt;10&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>Second:</strong> I want to allow any 5 <code>&lt;li&gt;</code>s from "container" to "selected" div. If someone tries to add 6th <code>&lt;li&gt;</code>, then it must not allow user to it. That is the 6th <code>&lt;li&gt;</code> that is going to be inserted into "selected" must be reverted using <a href="http://docs.jquery.com/UI/Draggable#option-revert">jQuery draggable option revert</a>.</p> <p>i.e. <code>$("#container li").draggable({ revert: true });</code> Here is javascript code for that.</p> <pre><code>$(document).ready(function(){ var total = 0; $("#selected").droppable({ drop: function() { total = $("#selected li").length; //alert(total); if (total &gt;= 5) { $("#container li").draggable({ revert: true }); } else { // below code is not working $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the &lt;li&gt; anywhere } } }); }); </code></pre> <p>This is working fine.</p> <p><strong>Third:</strong> But when I drag an <code>&lt;li&gt;</code> from "selected" to "container", the "selected" div will have only 4 <code>&lt;li&gt;</code>s. So in this situation, later on user should be able to add another <code>&lt;li&gt;</code> into "selected" div from "container" div. But unfortunately it is not working. All the <code>&lt;li&gt;</code>s I try to drag and drop into "selected" are being reverted due to <code>if (total &gt;= 5 )</code> condition.</p> <p>Can anyone help me to solve this out using <a href="http://docs.jquery.com/UI/Draggable#option-revert">draggable revert</a> option? Please...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgautamlakum
    1. USgautamlakum
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery draggable revert based on condition
      1. USphilwilks
      1. VTFavorite
    2. VO
      singulars
      1. POjQuery draggable revert based on condition
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery draggable revert based on condition
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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