Кнопка jQuery Sortable Move UP / DOWN
Некоторые из других ответов были полезны, но их не было достаточно, чтобы исключить повторную линию Vim, когда «#» является первым символом. Ответ PolyThinker не работал для меня, но он дал понять, что «#» можно переустановить для «вставки символа», затем «#», затем удалить дополнительный символ и поместить курсор туда, где он должен быть ». Это сопоставление, которое делает это:
inoremap # X#<left><backspace><right>
Это необходимо, потому что синтаксические пакеты vim, похоже, рассматривают «#» как специальный символ, независимо от того, как устанавливаются параметры. Я хочу, чтобы строка, начинающаяся с «#», была такой же, как строка, начинающаяся с любого другого символа. Самое надежное решение, которое я нашел, - это приведенное выше сопоставление, которое фактически меняет первый символ линии.
Примечание. Я обнаружил, что это отображение вызывает проблемы после запуска I#<esc>, а затем нажатия «.». для повторной установки предыдущей вставки. Я еще не нашел решение.
3 ответа
Если у вас следующий html-код:
<button id="myButtonUp">myButtonTextForUp</button>
<button id="myButtonDown">myButtonTextForDown</button>
<ul>
<li>line_1</li>
<li>line_2</li>
<li>line_3</li>
</ul>
Я предполагаю, что у вас уже есть что-то, что нужно пометить каждые li с, поэтому после я предполагаю, что помеченный li имеет класс markedLi; Следующий код должен теоретически переместить этот элемент вверх или вниз (полностью непроверенный с курса):
$('#myButtonUp').click(function(){
var current = $('.markedLi');
current.prev().before(current);
});
$('#myButtonDown').click(function(){
var current = $('.markedLi');
current.next().after(current);
});
Хотя ответ Азатота работает отлично, Бобби может искать анимацию, как я. поэтому я написал следующий код для анимации движения:
function moveUp(item) {
var prev = item.prev();
if (prev.length == 0)
return;
prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
prev.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertBefore(prev);
});
}
function moveDown(item) {
var next = item.next();
if (next.length == 0)
return;
next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
next.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertAfter(next);
});
}
вы можете посмотреть здесь http://jsfiddle.net/maziar/P2XDc/
На основании ответа @azatoth, если кому-то нравится иметь кнопки для каждой записи, он может сделать это таким образом (замените тег li на тег Sortable).
HTML:
<button class="my-button-up">Up</button>
<button class="my-button-down">Down</button>
jQuery:
$('.my-button-up').click(function(){
var current = $(this).closest('li');
current.prev().before(current);
});
$('.my-button-down').click(function(){
var current = $(this).closest('li');
current.next().after(current);
});