jQuery可拖动排序插件 - HTML5 Sortable
1 <!DOCTYPE html> 2 <html><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>jQuery可拖动排序插件 - HTML5 Sortable 演示页面 </title> 5 <!--演示页面的CSS样式--> 6 7 <style> 8 section { 9 display: block; 10 } 11 h1, h2 { 12 text-align: center; 13 font-weight: normal; 14 } 15 .connected, .sortable, .exclude, .handles { 16 margin: auto; 17 padding: 0; 18 width: 310px; 19 -webkit-touch-callout: none; 20 -webkit-user-select: none; 21 -khtml-user-select: none; 22 -moz-user-select: none; 23 -ms-user-select: none; 24 user-select: none; 25 } 26 .sortable.grid { 27 overflow: hidden; 28 } 29 .connected li, .sortable li, .exclude li, .handles li { 30 list-style: none; 31 border: 1px solid #CCC; 32 background: #F6F6F6; 33 font-family: "Tahoma"; 34 color: #1C94C4; 35 margin: 5px; 36 padding: 5px; 37 height: 22px; 38 } 39 .sortable.grid li { 40 line-height: 80px; 41 float: left; 42 width: 80px; 43 height: 80px; 44 text-align: center; 45 } 46 li.highlight { 47 background: #FEE25F; 48 } 49 #connected { 50 width: 440px; 51 overflow: hidden; 52 margin: auto; 53 } 54 .connected { 55 float: left; 56 width: 200px; 57 } 58 .connected.no2 { 59 float: right; 60 } 61 li.sortable-placeholder { 62 border: 1px dashed #CCC; 63 background: none; 64 } 65 </style> 66 </head> 67 <body > 68 <div id="header" style="text-align:center">JQuery可拖动排序插件 - HTML5 Sortable 69 </div> 70 <div class="content"> 71 <br> 72 <h2><b>jQuery可拖动排序插件 - HTML5 Sortable 演示页面</b></h2> 73 拖动以下列表项试试~~~ 74 75 <section> 76 <h2>可排序的列表</h2> 77 <ul class="sortable grid"> 78 79 <!--draggable="true|false|auto" 属性用于拖放操作,链接和图像默认是可拖动的--> 80 <li draggable="true">Item 2</li> 81 <li draggable="true" class="" style="display: list-item; ">Item 4</li> 82 <li draggable="true" class="" style="display: list-item; ">Item 6</li> 83 <li draggable="true" class="" style="display: list-item; ">Item 1</li> 84 <li draggable="true" class="" style="display: list-item; ">Item 3</li> 85 <li draggable="true">Item 5</li> 86 87 </ul> 88 </section> 89 90 91 <section id="connected"> 92 <h2>连接可排序的列表</h2> 93 <ul class="connected list"> 94 <li draggable="true">Item 1</li> 95 <li draggable="true">Item 2</li> 96 <li draggable="true">Item 3</li> 97 <li draggable="true">Item 4</li> 98 <li draggable="true">Item 5</li> 99 <li draggable="true">Item 6</li> 100 </ul> 101 <ul class="connected list no2"> 102 103 <li class="highlight" draggable="true">Item 2</li> 104 <li class="highlight" draggable="true" style="display: list-item; ">Item 1</li> 105 <li class="highlight" draggable="true">Item 4</li> 106 <li class="highlight" draggable="true">Item 5</li> 107 <li class="highlight" draggable="true">Item 6</li> 108 <li class="highlight" draggable="true" style="display: list-item; ">Item 3</li> 109 </ul> 110 </section> 111 112 113 </div> 114 115 <script src="./js/jquery.min.2.js"></script> 116 <script src="./js/jquery.sortable.js"></script> 117 <script> 118 $(function () { 119 //第一个列表的排序初始化 120 // $(‘.sortable‘).sortable(); 121 122 //第二个列表的排序初始化 123 $(‘.connected‘).sortable({ 124 connectWith: ‘.connected‘ //connectWith: ‘.list‘ 125 }); 126 127 }); 128 </script> 129 </body></html>
1 /* 2 * HTML5 Sortable jQuery Plugin 3 * http://farhadi.ir/projects/html5sortable 4 * 5 */ 6 (function($) { 7 var dragging, placeholders = $(); 8 $.fn.sortable = function(options) { 9 /* 10 * options: 此为排序列表对象，若传过来的有多个对象，则这多个对象可以互相拖拽排序（connectWith：true）。 11 * 若只有一个，则(connectWith: false); 12 */ 13 var method = String(options);//把options对象的值转换为字符串 14 options = $.extend({ 15 connectWith: false 16 }, options); 17 return this.each(function() { 18 debugger; 19 if (/^enable|disable|destroy$/.test(method)) { 20 var items = $(this).children($(this).data(‘items‘)).attr(‘draggable‘, method == ‘enable‘); 21 if (method == ‘destroy‘) { 22 items.add(this).removeData(‘connectWith items‘) 23 .off(‘dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s‘); 24 } 25 return; 26 } 27 var isHandle, index, items = $(this).children(options.items); 28 var placeholder = $(‘<‘ + items[0].tagName + ‘ class="sortable-placeholder">‘); 29 items.find(options.handle).mousedown(function() { 30 isHandle = true; 31 }).mouseup(function() { 32 isHandle = false; 33 }); 34 $(this).data(‘items‘, options.items) 35 placeholders = placeholders.add(placeholder); 36 if (options.connectWith) { 37 $(options.connectWith).add(this).data(‘connectWith‘, options.connectWith); 38 } 39 items.attr(‘draggable‘, ‘true‘).on(‘dragstart.h5s‘, function(e) { 40 if (options.handle && !isHandle) { 41 return false; 42 } 43 isHandle = false; 44 var dt = e.originalEvent.dataTransfer; 45 dt.effectAllowed = ‘move‘; 46 dt.setData(‘Text‘, ‘dummy‘); 47 index = (dragging = $(this)).addClass(‘sortable-dragging‘).index(); 48 }).on(‘dragend.h5s‘, function() { 49 dragging.removeClass(‘sortable-dragging‘).fadeIn(); 50 placeholders.detach(); 51 if (index != dragging.index()) { 52 items.parent().trigger(‘sortupdate‘, {item: dragging}); 53 } 54 dragging = null; 55 }).not(‘a[href], img‘).on(‘selectstart.h5s‘, function() { 56 this.dragDrop && this.dragDrop(); 57 return false; 58 }).end().add([this, placeholder]).on(‘dragover.h5s dragenter.h5s drop.h5s‘, function(e) { 59 if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data(‘connectWith‘)) { 60 return true; 61 } 62 if (e.type == ‘drop‘) { 63 e.stopPropagation(); 64 placeholders.filter(‘:visible‘).after(dragging); 65 return false; 66 } 67 e.preventDefault(); 68 e.originalEvent.dataTransfer.dropEffect = ‘move‘; 69 if (items.is(this)) { 70 if (options.forcePlaceholderSize) { 71 placeholder.height(dragging.height()); 72 } 73 dragging.hide(); 74 $(this)[placeholder.index() < $(this).index() ? ‘after‘ : ‘before‘](placeholder); 75 placeholders.not(placeholder).detach(); 76 } 77 return false; 78 }); 79 }); 80 }; 81 })(jQuery);
这个JS代码通过调试着看，只是大致看明白了。 需要多了解些Html5 中的新属性。