Home  >  Article  >  Web Front-end  >  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
WBOYOriginal
2016-05-16 16:44:011272browse

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:




    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
    Statement:
    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