Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jquery list drag arrangement (extracting from the project is very easy to use)_jquery

jquery list drag arrangement (extracting from the project is very easy to use)_jquery

WBOY
Release： 2016-05-16 16:44:01
Original
1285 people have browsed it

Code 1 preview:

Copy code The code is as follows:





最好的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

    The drag handle of the list item within the CSS selector. The default value is "li".
    dragSelectorExclude
    The dragSelector within the CSS selector element will not trigger dragsort. The default value is "input, textarea, a[href]"
    dragEnd

    < dd>The callback function that will be called after dragging.
    dragBetween

    Set to "true" if you want to enable multiple sets of lists Drag the selected list. The default value is false.
    placeHolderTemplate
    The default value is "<. ;li>
    • ".
    scrollContainer

    Element of CSS selector, as scroll container, for example, an overflow div is set to automatic. The default value is "Window".

    scrollSpeed

    A number, which represents the speed. When the page drags an item, the container will be scrolled Also, higher values ​​are faster and lower values ​​are slower. If set to "0" to disable scrolling. The default value is "5".









    Code 2 preview:


    Copy code The code is as follows:


    jQuery UI sortable() implements drag sorting





    <script> <br>$(function() { <br>$( ".sortable" ).sortable({ <br>cursor: "move", <br>items: "li", //Only li can be dragged <br>opacity: 0.6, //When dragging, the transparency is 0.6 <br>revert: true, //When releasing, add animation <br>update : function(event, ui){ //After updating sorting<br>alert($(this).sortable("toArray")); <br>} <br>}); <br>}) ; <br></script>

    • Item 1
    • Item 2

    • Item 3






    Source code download
    Related labels：
    jquery list
    source：php.cn
    Previous article：A brief discussion on jQuery event source code positioning_jquery Next article：js debugging series source code positioning and debugging [basics]_javascript skills
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
    From 2024-04-06 14:54:03
    0
    2
    421
    How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
    From 2024-04-05 09:26:49
    0
    1
    1418
    Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
    From 2024-04-04 18:40:04
    0
    1
    3528
    I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
    From 2024-04-04 17:27:27
    0
    1
    417
    Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
    From 2024-04-04 12:53:48
    0
    1
    303
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template