jQuery UI sortable を使用して、接続されたリストをソートしています。更新イベントが 2 回実行されているようです。
完全なソート可能な呼び出しは次のとおりです。
$(".pageContent").sortable({
handle: ".quesText",
connectWith: ".pageContent",
containment: "section",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
},
placeholder: "sortable-placeholder",
opacity: 0.5,
cursor: "move",
cancel: "input, select, button, a, .openClose",
update: function(e, ui){
var thisItem = ui.item;
var next = ui.item.next();
var prev = ui.item.prev();
var thisNumber = thisItem.find(".quesNumb");
var nextNumber = next.find(".quesNumb");
var prevNumber = prev.find(".quesNumb");
var tn = parseInt(thisNumber.text());
var nn = parseInt(nextNumber.text());
var pn = parseInt(prevNumber.text());
var quesNumbs = $(".quesNumb");
var newItemId = thisItem.attr("id").replace(/_\d+$/, "_");
//test if we are dragging top down
if(ui.position.top > ui.originalPosition.top){
quesNumbs.each(function(i){
var thisVal = parseInt($(this).text());
var grandparent = $(this).parent().parent();
var grandId = grandparent.attr("id").replace(/_\d+$/, "_");
if(thisVal > tn && (thisVal <= pn || thisVal <= (nn - 1))){
$(this).text(thisVal - 1 + ".");
grandparent.attr("id",grandId + (thisVal - 1));
}
});
if(!isNaN(pn) || !isNaN(nn)){
if(!isNaN(pn)){
//for some reason when there is a sender pn gets updated, so we check if sender exists
//only occurs sorting top down
if($.type(ui.sender) !== "null"){
var senderId = ui.sender.attr("id");
thisNumber.text(pn + 1 + ".");
thisItem.attr("id",senderId + "_" + (pn + 1));
alert(thisItem.attr("id"));
}
else {
thisNumber.text(pn + ".");
thisItem.attr("id",newItemId + pn);
alert(thisItem.attr("id"));
}
}
else {
thisNumber.text(nn - 1 + ".");
}
}
else {
//something will happen here
}
}
//otherwise we are dragging bottom up
else {
quesNumbs.each(function(i){
var thisVal = parseInt($(this).text());
if(thisVal < tn && (thisVal >= nn || thisVal >= (pn + 1))){
$(this).text(thisVal + 1 + ".");
}
});
if(!isNaN(pn) || !isNaN(nn)){
if(!isNaN(pn)){
thisNumber.text(pn + 1 + ".");
}
else {
thisNumber.text(nn + ".");
}
}
else {
//something will happen here
}
}
}
});
2回実行されるように見える部分は次のとおりです。
if($.type(ui.sender) !== "null"){
var senderId = ui.sender.attr("id");
thisNumber.text(pn + 1 + ".");
thisItem.attr("id",senderId + "_" + (pn + 1));
alert(thisItem.attr("id"));
}
else {
thisNumber.text(pn + ".");
thisItem.attr("id",newItemId + pn);
alert(thisItem.attr("id"));
}
並べ替えが同じリスト内にとどまる場合、 1つalertだけui.senderを取得することを期待しています。null項目が別の項目に移動するためにリストを離れると、それui.senderはなくなりますnull。
問題は、アイテムを新しいリストに移動すると、 2 つの警告メッセージが表示されることです。更新関数が一度実行された後に ui.sender が設定されているかのように、更新関数が再度実行されます。必ずしも上書きされるべきではないデータを上書きしているので、明らかにこれは良くありません。
その場合、データを上書きしないようにコードを書き直すにはどうすればよいですか?
編集
一般的なDOMだけでなく、リストDOMが変更されるたびに更新イベントが呼び出されると思います。したがって、DOM の変更があるリストごとに更新が実行されます。1 つのアイテムを新しいリストに移動すると、2 つのリストが更新されます。
したがって、新しい問題は次のようになると思います: 2 回起動することを知っているこのコードをどのように書き直せばよいでしょうか? これを達成できるReceiveイベントとRemoveイベントの組み合わせはありますか?