jQuery的從一個DIV排序到另一個

我有一點與jQuery UI可排序的問題，並且需要一些幫助：我有以下的html代碼：jQuery的從一個DIV排序到另一個

<div class="sortable"> 
<div class="item"> 
    <p>title1</p> 
    <div class="sort">sort 1</div> 
</div> 
    <div class="item"> 
    <p>title2</p> 
    <div class="sort">sort 2</div> 
</div> 
    <div class="item"> 
    <p>title3</p> 
    <div class="sort">sort 3</div> 
</div> 
</div>

有3個div的容器。每一個都有一個標題和一個定義 - 這三個定義應該是可排序的，但上面的標題應該始終保持不變。這裏的JS：

$(".sortable").sortable({ 
    items: ".sort" 
});

如果我在排序選項，只有指定的項目進行排序指定，他們進行排序，但取出的DIV結構我想要的 - 每個裏面父「.item」之一元素。

這裏與行爲的小提琴：http://jsfiddle.net/wPtjM/

有沒有辦法實現我需要什麼用jQuery可排序？我看到的所有例子&都沒有這樣的結果。提前謝謝了！

來源

2014-02-13 loreley

所以，你想會發生什麼，當我下TITLE1拖拽排序3，排序1個移動在標題2下，排序2在標題3下移動？ –

尋找類似的東西？

var dropped; 
var titleDrop; 
var titleChange; 
$(function() { 
    $(".sortable").sortable({ 
     items: ".sort", 
     stop: function(event, ui) { 
      if(titleDrop != titleChange) 
       dropped.append(ui.item); 
     }, 
     change: function(event, ui){ 
      titleChange = ui.placeholder.parent().find('p').text(); 
     } 
    }); 
    $(".item").droppable({ 
     accept: ".sort", 
     drop: function(event, ui) { 
      dropped = $(this); 
      titleDrop = $(this).find('p').text(); 
     } 
    }); 
});

FIDDLE

更新

集成了開關的地方：

FIDDLE2

來源

2014-02-13 20:43:13 Trevor

謝謝！這幾乎和我需要的一樣，我意識到我應該添加的唯一東西就是.sort項目在拖動時應該交換位置，例如，將.sort1拖到sort2上，它們會改變位置。經過多次搜索後，我認爲這實際上可以在不使用jQuery排序的情況下完成，只需拖放即可。 – loreley

@loreley正確的，可以不用拖放。 – Trevor

@loreley這是一個例子。 http://jsfiddle.net/wPtjM/4/ – Trevor

jQuery的從一個DIV排序到另一個

回答

相關問題