没有jQuery UI的jQuery Sortable
我需要“可排序的拖放”function，我正在使用jQuery。 我真的不能使用jQuery UI，因为对于这个项目来说，这将是一个开销（我需要添加许多KB的JS和CSS才能使用一小部分function）。
有没有你可以推荐的插件，或者是一个简单的实现路径，我可以遵循？
解决方案必须尽可能轻量级，最好基于jQuery / Sizzle或纯JavaScript。
您可以在jqueryui.com上构建自己的JQuery下载，而不需要所有的css /主题信息。 您还可以删除小部件和效果，只需使用draggable / droppable。
全部大约30KB。还是太大了？
对于后代： http ： //dragsort.codeplex.com/
演示： http ： //cleesh.org/example （在开发网站上找不到一个）。
缩小它的大小为9KB。
这是后代的另一个： http ： //johnny.github.com/jquery-sortable/ 。
它唯一的依赖是jQuery，有一个很好的function集，并在8kb缩小。
自从被问到这个问题以来，很多时候也许，如果您正在考虑使用jquery UI的替代方案，这可能非常好并且易于实现http://rubaxa.github.io/Sortable/
如果您确定不使用自定义，缩小和gzipped版本的jQueryUI，您可以维护和更新…
…也许以下博客文章中的一个插件符合您的青睐：
“17个简单高效的重新排序和过滤页面元素的jQuery插件” http://www.tripwiremagazine.com/2010/03/17-jquery-plugins-for-easy-and-efficient-reordering-and-filtering-page- elements.html
来自blogpost的示例：“列表重新排序”（<10KB）或“带有jQuery的可排序表行 - 可拖动行”（<3KB）
如果你看一下jQuery UI源代码 ， jquery.ui.sortable.js是一个单独的文件，我相信它只依赖于jquery.ui.core.js ， jquery.ui.widget.js和jquery.ui.mouse.js ，虽然我没有测试过这个。 然而，这仍然在36KB缩小的重量。
你可以尝试我的（ http://jsfiddle.net/606bs750/16/ ）。 可以拖动和排序的无限数量的块。
块将约束到父级。
JQuery（仅限）：
$(function() { $('.button').mousedown(function(e) { if(e.which===1) { var button = $(this); var button_id = button.attr('id'); var parent_height = button.parent().innerHeight(); var top = parseInt(button.css('top')); var original_ypos = button.position().top; //original ypos var drag_min_ypos = 0-original_ypos; var drag_max_ypos = parent_height-original_ypos-button.outerHeight(); var drag_start_ypos = e.clientY; var my_ypos = original_ypos; //Set current order for all $('.button').each(function(i) { $(this).attr('data-order',(i+1)); }); var prev_button = button.prev('.button'); var next_button = button.next('.button'); var prev_button_ypos = prev_button.length>0 ? prev_button.position().top : ''; var next_button_ypos = next_button.length>0 ? next_button.position().top : ''; $('#log1').text('mousedown '+button_id+' original_ypos: '+original_ypos); $('#log2').text(''); $('#log3').text(''); $(window).on('mousemove',function(e) { //Move and constrain button.addClass('drag'); var direction = my_ypos>button.position().top ? 'up' : 'down'; var new_top = top+(e.clientY-drag_start_ypos); my_ypos = button.position().top; button.css({top:new_top+'px'}); if(new_topdrag_max_ypos) { button.css({top:drag_max_ypos+'px'}); } $('#log2').text('mousemove new_top: '+new_top+', my_ypos: '+my_ypos+', direction: '+direction); //$('#log3').text(''); //Check position over others if(direction=='down'&&next_button_ypos!='') { if(my_ypos>next_button_ypos) { //crossed next button $('#log3').text('dragged after '+next_button_ypos+' ('+next_button.attr('id')+')'); next_button.css({top:(parseInt(next_button.css('top'))-next_button.outerHeight(true))+'px'}); //up once var tmp_order = next_button.attr('data-order'); next_button.attr('data-order',button.attr('data-order')); //switch order button.attr('data-order',tmp_order); prev_button = next_button; next_button = next_button.nextAll('.button:not(.drag)').first(); prev_button_ypos = prev_button.length>0 ? prev_button.position().top : ''; next_button_ypos = next_button.length>0 ? next_button.position().top : ''; } } else if(direction=='up'&&prev_button_ypos!='') { if(my_ypos0 ? prev_button.position().top : ''; next_button_ypos = next_button.length>0 ? next_button.position().top : ''; } } $('#log4').text('prev_button_ypos: '+prev_button_ypos+' ('+prev_button.attr('id')+'), next_button_ypos: '+next_button_ypos+' ('+next_button.attr('id')+')'); }); $(window).on('mouseup',function(e) { if(e.which===1) { $('.button').removeClass('drag'); $(window).off('mouseup mousemove'); //Reorder and reposition all $('.button').each(function() { var this_order = parseInt($(this).attr('data-order')); var prev_order = $(this).siblings('.button[data-order="'+(this_order-1)+'"]'); if(prev_order.length>0) { $(this).insertAfter(prev_order); } }); $('.button').css('top','0'); $('.button').removeAttr('data-order'); //reset $('#log1').text('mouseup'); $('#log2').text(''); $('#log3').text(''); $('#log4').text(''); } }); } }); });
这里有一个http://plugins.jquery.com/project/NestedSortable它不使用UI，只有5kb（尽管你可以破解任何额外的function，以便在需要时降低它）
希望有所帮助
安德鲁
如果你想要没有装饰，那么我发现这个最好： http ： //jsfiddle.net/erikdana/Nkykq/3/ upto http://jsfiddle.net/erikdana/Nkykq/6/
非常非常轻盈而且非常重要。
JS
$('#box').bind({ mousedown: function() { $(document).mousemove(function(e) { $('#box').css({ top: e.pageY - 10, left: e.pageX - 20 }); }); }, mouseup: function() { $(document).unbind(mousedown); var box = $('#box').css('top'); if (box > '100') { $('#box').css({width: '100px'}); }; } });
CSS
div {width:50px;height:50px;background:blue;position:absolute; cursor:move;} div:focus { cursor:move;}
我建议你去“LMDD拖放”gzip压缩不到4kb，实现起来非常简单。 https://supraniti.github.io/Lean-Mean-Drag-and-Drop/简单示例：
div id="basic-example"> (scope) (container) (draggable)