Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Jquery-Listen-Drag-Anordnung (das Extrahieren aus dem Projekt ist sehr einfach)_jquery

Jquery-Listen-Drag-Anordnung (das Extrahieren aus dem Projekt ist sehr einfach)_jquery

WBOY
Freigeben： 2016-05-16 16:44:01
Original
1316 Leute haben es durchsucht

Vorschau von Code 1:

Code kopieren Der Code lautet wie folgt:





最好的jquery列表拖动排列自定义拖动层排列









jQuery列表拖动排列演示



简单的一组列表:




  • 你猜

  • 你不猜

  • 你不猜你不猜

  • 猜猜

  • 你猜不猜

  • 你猜不猜不猜

  • 你不猜不猜







两组列表拖放:(无限组拖放)




  • 10

  • 11

  • 12

  • 13

  • 14

  • 15

  • 16

  • 17

  • 18




  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9






🎜>

Usage


$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "
  • < ;/li>" });




    dragSelector

    Der Drag-Handle des Listenelements im CSS-Selektor. Der Standardwert ist „li“.
    dragSelectorExclude
    Der Standardwert ist „input, textarea, a[href]“
    dragEnd
    Die Rückruffunktion, die nach dem Ziehen aufgerufen wird.
    dragBetween
    Auf „true“ setzen, wenn Sie mehrere Listensätze aktivieren möchten. Der Standardwert ist false ;dt>placeHolderTemplate Der Standardwert ist „“. des CSS-Selektors, z. B. als Scroll-Container, wird ein Überlauf-Div auf „Automatisch“ gesetzt. Der Standardwert ist „Fenster“.
    scrollSpeed
    gescrollt werden Außerdem sind höhere Werte schneller und niedrigere Werte langsamer. Bei Einstellung auf „0“ wird das Scrollen deaktiviert. Der Standardwert ist „5“.



    • ;


    Code 2-Vorschau:




    Code kopieren


    Der Code lautet wie folgt:



    jQuery UI sortable() implementiert Drag-Sortierung http- equiv="Content-Type" content="text/html; charset=UTF-8">

    <script> Cursor: „move“, <br>Elemente: „li“, //Nur li kann gezogen werden <br>Deckkraft: 0,6, //Beim Ziehen beträgt die Transparenz 0,6 <div class="codetitle">revert: true, //Beim Loslassen, Animation hinzufügen <span>update : function(event, ui){ //Nachdem die Sortierung aktualisiert wurde<a style="CURSOR: pointer" data="79978" class="copybut" id="copybut79978" onclick="doCopy('code79978')">alert($(this).sortable("toArray")); <u> }) ; </u></script>
    • Item 1
    • Item 2
      • >Item 3
    Verwandte Etiketten：
    jquery 列表
    Quelle：php.cn
    Vorheriger Artikel：Eine kurze Diskussion über den jQuery-Ereignisquellcode „positioning_jquery“. Nächster Artikel：js-Debugging-Serie, Positionierung des Quellcodes und Debugging [Grundlagen]_Javascript-Kenntnisse
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
    Aus 2024-04-06 14:54:03
    0
    2
    421
    So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
    Aus 2024-04-05 09:26:49
    0
    1
    1418
    Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...
    Aus 2024-04-04 18:40:04
    0
    1
    3528
    Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...
    Aus 2024-04-04 17:27:27
    0
    1
    417
    Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
    Aus 2024-04-04 12:53:48
    0
    1
    303
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage