Jquery ui sortable (Empty-list ) example...

I am creating a interface where user can interact with the given options. I am using Jquery UI sortable Empty-list for that.

What's the requirement:--

Suppose there is a table having two columns having some number of rows(>0). Now i need this Empty-list in every row.(I dont need this middle one shown in the demo ie non-drop-able) Only first and last one shown in the demo.

Whats the problem:---

Now we have 5 rows each having two columns. User can drop column 1_1 to column 1_2 OR column 2_1 to column 2_2 and so on....

But he can also drop from column 2_1 to column 1_2. You getting what i am trying to say. I want to do something like this that drop able option must be available only within two columns of same row.

If U have the code of the the whole documentation then just paste this code in your empty-list.html. The code i am pasting here is exactly same as the code from the demo. i am just adding the same html panels twice here..

   <!doctype html>
<html lang="en">
 <head>
<title>jQuery UI Sortable - Handle empty lists</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#sortable1,  #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
#sortable4,  #sortable5 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable4 li, #sortable5 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script type="text/javascript">
$(function() {
    $("ul.droptrue").sortable({
        connectWith: 'ul'
    });

    $("ul.dropfalse").sortable({
        connectWith: 'ul',
        dropOnEmpty: false
    });

    $("#sortable1, #sortable3").disableSelection();
    $("#sortable4, #sortable5").disableSelection();

});

</script>
 </head>
 <body>
  <div class="demo">
     Asset1
    <ul id="sortable1" class='droptrue'>
<li class="ui-state-default" value="1">Can be dropped..</li>
<li class="ui-state-default" value="2">..on an empty list</li>
<li class="ui-state-default" value="3">Item 3</li>
<li class="ui-state-default" value="4">Item 4</li>
<li class="ui-state-default" value="5">Item 5</li>
   </ul>



       <ul id="sortable3" class='droptrue'>
        </ul>
           <br clear="both" />
             <div style="padding-top:50px;"></div>
           Asset2
          <ul id="sortable4" class='droptrue'>
        <li class="ui-state-default" value="1">Can be dropped..</li>
       <li class="ui-state-default" value="2">..on an empty list</li>
      <li class="ui-state-default" value="3">Item 3</li>
            <li class="ui-state-default" value="4">Item 4</li>
        <li class="ui-state-default" value="5">Item 5</li>
     </ul>



       <ul id="sortable5" class='droptrue'>
        </ul>

        <br clear="both" />


   </div><!-- End demo -->



       </body>
     </html>

ansaurus

tags:

views:

answers:

Jquery ui sortable (Empty-list ) example...

related questions