• Címkék:
  • lista
  • sortable
  • rendez
  • form
  • grid
  • rács
  • HTML5

HTML5 Sortable

Példa 1: Rendezhető lista

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').sortable();
        });
      

HTML kód

        <ul id="pelda-1" class="lista">
          <li>1. elem</li>
          <li>2. elem</li>
          <li>3. elem</li>
          <li>4. elem</li>
          <li>5. elem</li>
          <li>6. elem</li>
        </ul>
      

Példa 2: Rendezhető rács eseménykezelővel

Deklaráció

        $(document).ready(function(){
          $('#pelda-2').sortable().bind('sortupdate', function() { alert('lista módosítva') });
        });
      

HTML kód

        <ul id="pelda-2" class="grid">
          <li>1. elem</li>
          <li>2. elem</li>
          <li>3. elem</li>
          <li>4. elem</li>
          <li>5. elem</li>
          <li>6. elem</li>
          <li>7. elem</li>
          <li>8. elem</li>
          <li>9. elem</li>
        </ul>
      

Példa 3: Rendezhető lista kivételekkel

Deklaráció

        $(document).ready(function(){
          $('#pelda-3').sortable({ items: ':not(.disabled)' });
        });
      

HTML kód

        <ul id="pelda-3" class="lista">
          <li>1. elem</li>
          <li>2. elem</li>
          <li>3. elem</li>
          <li class="disabled">4. elem</li>
          <li class="disabled">5. elem</li>
          <li class="disabled">6. elem</li>
        </ul>
      

Példa 4: Rendezhető lista mozgatóterülettel

Deklaráció

        $(document).ready(function(){
          $('#pelda-4').sortable({ handle: 'span' });
        });
      

HTML kód

        <ul id="pelda-4" class="lista">
          <li><span class="handle"></span>1. elem</li>
          <li><span class="handle"></span>2. elem</li>
          <li><span class="handle"></span>3. elem</li>
          <li><span class="handle"></span>4. elem</li>
          <li><span class="handle"></span>5. elem</li>
          <li><span class="handle"></span>6. elem</li>
        </ul>
      

Példa 5: Rendezhető listák összekapcsolása

Deklaráció

        $(document).ready(function(){
          $('.connected').sortable({ connectWith: '.connected' });
        });
      

HTML kód

        <ul class="connected lista">
          <li>1. elem</li>
          <li>2. elem</li>
          <li>3. elem</li>
          <li>4. elem</li>
          <li>5. elem</li>
          <li>6. elem</li>
        </ul>
        
        <ul class="connected lista">
          <li class="colored">1. elem</li>
          <li class="colored">2. elem</li>
          <li class="colored">3. elem</li>
          <li class="colored">4. elem</li>
          <li class="colored">5. elem</li>
          <li class="colored">6. elem</li>
        </ul>
      

« bezár