var dragLastPlace;
var movedLastPlace;
$('.draggable').draggable({
placeholder: 'placeholder',
cursor:'move',
zIndex: 1000,
containment: 'tbody.playlist',
helper: function(evt) {
var that = $(this).clone().get(0);
$(this).hide();
return that;
},
start: function(evt, ui) {
dragLastPlace = $(this).parent();
window.from = ($(this).closest('tr').index());
window.from = window.from + 1;
console.log(window.from);
},
cursorAt: {
top: 20,
left: 20
}
});
$('.droppable').droppable({
hoverClass: 'placeholder',
cursor:'move',
drop: function(evt, ui) {
var draggable = ui.draggable;
var droppable = this;
if ($(droppable).children('.draggable:visible:not(.ui-draggable-dragging)').length > 0) {
$(droppable).children('.draggable:visible:not(.ui-draggable-dragging)').detach().prependTo(dragLastPlace);
}
$(draggable).detach().css({
top: 0,
left: 0
}).prependTo($(droppable)).show();
movedLastPlace = undefined;
window.to = ($(this).closest('tr').index());
window.to = window.to + 1;
console.log(window.to);
$.ajax({
type: 'GET',
async: false,
url: './move/?from='+window.from+'&to='+window.to,
success: function(data){
console.log(data);
}
});
},
over: function(evt, ui) {
var draggable = ui.draggable;
var droppable = this;
if (movedLastPlace) {
$(dragLastPlace).children().not(draggable).detach().prependTo(movedLastPlace);
}
if ($(droppable).children('.draggable:visible:not(.ui-draggable-dragging)').length > 0) {
$(droppable).children('.draggable:visible').detach().prependTo(dragLastPlace);
movedLastPlace = $(droppable);
}
}
});
Есть вот такой функционал, он меняет местами td в разных tr. Нужно сделать так чтобы он не менял местами, а выполнял sortable, и так же отправить аякс запрос.
Таблица имеет ввид
<tr><td>//text1</td><td>//button1</td>
<tr><td><//text2</td><td>//button2</td>
Нужно поменять text1 и text2 местами, оставив button 1 и button2 на своем месте, и сказать 1 position to 2 position.
Как это реализовать?