jQuery的排序，拖動和可投放

-1

源容器與圖像：

<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'); 
    } 
});

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

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

來源

2016-08-08 hfmAH

我不確定你想要做什麼。你的意思是什麼？按什麼排序？ –

我想改變圖像的位置... – hfmAH

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

：

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

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

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

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

來源

2016-08-09 08:23:30 hfmAH

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

.img-selected是你拖動的img。

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

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

來源

2016-08-08 08:00:48

jQuery的排序，拖動和可投放

回答

相關問題