Мне нужна функция "Сортировка перетаскивания", и я использую jQuery. Я не могу использовать jQuery UI, потому что для этого проекта это было бы накладным (мне нужно было бы добавить много KB JS и CSS только для использования небольшой части функциональности).
Есть ли какой-нибудь плагин, который вы могли бы порекомендовать или, возможно, простой путь реализации, за которым я могу следовать?
Решение должно быть максимально легким, предпочтительно на основе jQuery/Sizzle или чистого JavaScript.
Вы можете создать свою собственную загрузку JQuery на jqueryui.com без всякой информации css/theme. Вы также можете отключить виджеты и эффекты и просто использовать draggable/droppable.
Приходит примерно до 30 КБ. Все еще слишком большой?
Для будущих поколений: http://dragsort.codeplex.com/
Демонстрация: http://cleesh.org/example (не удалось найти ее на веб-сайте разработки).
Миниатюрный размер составляет 9 КБ.
Вот еще один для будущих поколений: http://johnny.github.com/jquery-sortable/.
Это только зависимость jQuery, имеет хороший набор функций и входит в размер 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: "List Reorder" (< 10KB) или "Сортируемые таблицы строк с jQuery - перетаскиваемые строки" (< 3KB)
Если вы посмотрите на источник jQuery UI, jquery.ui.sortable.js - это отдельный файл, который, я считаю, зависит только от jquery.ui.core.js, jquery.ui.widget.js и jquery.ui.mouse.js, хотя я не тестировал это. Тем не менее, это все еще весит на уровне 36 КБ.
Вы можете попробовать мои (http://jsfiddle.net/606bs750/16/). Неограниченное количество блоков, которые вы можете перетаскивать и сортировать.
Блоки будут сдерживать родителя.
<div id="parent" class="parent">
<button id="button1" class="button">Drag me 1</button>
<button id="button2" class="button">Drag me 2</button>
<button id="button3" class="button">Drag me 3</button>
<button id="button4" class="button">Drag me 4</button>
</div>
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_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); }
if(new_top>drag_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_ypos<prev_button_ypos) { //crossed prev button
$('#log3').text('dragged before '+prev_button_ypos+', '+prev_button.attr('id'));
prev_button.css({top:(parseInt(prev_button.css('top'))+prev_button.outerHeight(true))+'px'}); //down once
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order',button.attr('data-order')); //switch order
button.attr('data-order',tmp_order);
next_button = prev_button; prev_button = prev_button.prevAll('.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 : '';
}
}
$('#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('');
}
});
}
});
});
theres здесь http://plugins.jquery.com/project/NestedSortable он не использует пользовательский интерфейс и составляет всего 5 килобайт (хотя вы могли бы взломать любую дополнительную функциональность, чтобы уменьшить его, если это необходимо)
надеюсь, что поможет
Эндрю
Если вы не хотите излишеств, я нашел это лучшим: 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 drag and drop" Менее 4 килобайт gzipped и очень прост в реализации. https://supraniti.github.io/Lean-Mean-Drag-and-Drop/ Простой пример:
div id="basic-example"> (scope)
<div class="grid"> (container)
<div class="item"></div> (draggable)
</div>
</div>
<script>
lmdd.set(document.getElementById('basic-example'), {
containerClass: 'grid',
draggableItemClass: 'item'
});
</script>