jQuery plugins - HTML5 Sortable
aug 16

HTML5 Sortable

Rendezhető listák

Verzió: nincs adat
Kiadás dátuma: 2012
Fejlesztő: Ali Farhadi
Liszensz: MIT
  • 1187
  • 6585
  • 0
  • -

Bevezető

Ezt a hasznos kis plugin-t a Webtechnikák oldalán találtam. Ugyanazt a funkciót valósítja meg, mint a hasonló nevű jQueryUI társa (sortable): mindkettő segítségével egyszerű listákat alakíthatunk át rendezhető listákká, ahol a lista elemeit drag and drop művelettel tetszőlegesen sorba rendezhetjük.

A két megoldás közti különbség szolgáltatja a HTML5 Sortable plugin erősségét: a plugin kis méretű, ellentétben a jQueryUI féle verzióval, ahol a bemutatott funkció használatba vételéhez nem használt, felesleges kódokat is le kell töltenünk - lassítva ezzel honlapunk betöltődését, illetve működését.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.sortable.js"></script>
          

Deklaráció

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

Teljes paraméterlista

  • items: a rendezhető listaelemek meghatározása
  • handle: mozgatóterület használata esetén az interaktív terület CSS szelektora
  • connectWith: rendezhető listák összekapcsolása
    Példa:
                    $('#pelda-1, #pelda-2').sortable({ connectWith: '.connected' });
                  
  • destroy: a plugin megszüntetése
    Példa:
                    $('#pelda').sortable('destroy');
                  
  • disable: az összes listaelem tiltása
    Példa:
                    $('#pelda').sortable('disable');
                  
  • enable: az összes listaelem engedélyezése
    Példa:
                    $('#pelda').sortable('enable');
                  

Tippek

  • A plugin működéséhez a jQuery keretrendszer 1.7.1+ verziója szükséges
  • A listaelemek mozgatása során az üresen maradó helyjelölő formázására a .sortable-placeholder szelektor használható
  • A listaelemek mozgatása során a mozgatott elem formázására a .sortable-dragging szelektor használható