World of Warcraft プレイヤー向けのレシピ トラッカー ツールをhttp://www.wowgeeks.com/tracker.php?item=recipesに用意しました。「持っている」リスト、「必要」リスト、オリジナルのアイテムから選択できるリストの 3 つのカスタム デザインのリストがあります。最後のリストはドラッグ可能でconnectToSortable
、最初の 2 つのリストが共有するクラスに設定されています。
3 つのリストの HTML:
<div class="sub-third">
<h1>My Recipes</h1>
<div class="tracker-list sortable" id="have-list">
</div>
</div>
<div class="sub-third">
<h1 style="color: #f90;">Recipes I Need</h1>
<div class="tracker-list sortable" id="need-list">
</div>
</div>
<div class="sub-third">
<h1 style="color: #eee;">Add Recipes</h1>
<div class="tracker-list" id="add-list">
<div class="tracker-item" id="itemid_123">
<a class="tracker-icon" rel="item=43509"><img class="wow-icon" src="/images/icons/small/inv_scroll_03.jpg" alt="Icon" /></a>
<p>Bad Clams</p>
</div>
<!-- ETC... -->
</div>
</div>
そして、ドラッグ可能/ソート可能の JavaScript は次のとおりです。
$(function() {
$('#add-list .tracker-item').draggable({
connectToSortable : '.sortable',
helper : 'clone'
});
$('#have-list, #need-list').sortable({
connectWith : '.tracker-list',
cursor : 'move',
revert : true,
placeholder : 'ui-state-highlight',
update : function() {
var order = $(this).sortable('serialize');
order += '&userid=1&itemtype=Recipes&charid=0';
//alert(order);
}
});
$('.tracker-list, .tracker-item').disableSelection(); // So dragging doesn't accidentally select any text
$('#have-list, #need-list').sortable('refresh'); // Refresh the lists
});
なんらかの理由で、項目を 3 番目のリストから 1 番目のリストに 1、2 回ドラッグした後、突然連携を拒否します。3 番目のリストの項目が突然ドラッグできなくなります。ただし、項目を 3 番目のリストから 2 番目のリストにドラッグしても問題なく動作します。上記のリンクを試して、自分でテストすることができます。誰が問題が何であるか教えてもらえますか?