jQuery的排序，拖動和可投放

Question

我有兩個DIV容器：

源容器與圖像：

<div class="images"> 
    <span class="pic"><img src="img_1.jpg"></span> 
    <span class="pic"><img src="img_2.jpg"></span> 
    <span class="pic"><img src="img_3.jpg"></span> 
</div> 

Desrination容器，其中i不得不放棄上述圖像：

<div id="desrination"> 
</div> 

隨着以下jQuery我使用可拖動和可拖放：

// Draggable 
$('.pic').draggable({ 
    helper: function() { 
     // just one selected image 
     var container = $('<div/>').attr('id', 'draggingContainer'); 
     container.append($(document).find(this).clone()); 
     $(this).addClass('img-selected'); 
     return container; 
    } 
}); 

// Droppable 
$('#desrination').droppable({ 
    drop: function(event, ui) { 
     $(this).append(ui.helper.children()); 
     $('#images').find('.img-selected').hide(); 
     $(document).find('.img-selected').removeClass('img-selected'); 
    } 
}); 

它工作正常，但我怎麼能實現如下：

1. 我怎樣才能改變目的地容器的圖像位置？
2. 如何將來自源容器的圖像排序到目標容器的特定位置？

Answer 1

我解決了jQuery的排序UI的問題：我換成可放開與排序

：

$('#desrination').sortable({ 
    // make some things 
}); 

然後我連接可排序區域的可拖動功能：

$('.pic').draggable({ 
    connectToSortable: "#desrination" 
}); 

現在，我可以將pic容器中的圖像放入噴粉容器中，並更改這些照片的位置。

Answer 2

你想改變什麼位置？ 這個例子我告訴你父母#desrination的5個孩子。

.img-selected是你拖動的img。

var posIndex = $('#desrination').children(':nth-child(5)'); 
$('#desrination').find('.img-selected').insertAfter(posIndex); 

您可以插入此代碼之前刪除.img-selected