我如何可以拖動排序元素轉換爲其他sortables元素

我sortables元素2只列出了，我需要能夠從列表中拖動一個項目到另一個列表：我如何可以拖動排序元素轉換爲其他sortables元素

我試圖做到這一點，但它似乎它不能正常工作。

我的代碼：

<div class="sortableCard"> 
    <div class="draggable">car 5</div> 
    <div class="draggable">car 6</div> 
</div> 

<div class="sortableCard"> 
    <div class="draggable">car 1</div> 
    <div class="draggable">car 2</div> 
    <div class="draggable">car 3</div> 
</div> 

$(function() { 
    $(".sortableCard").sortable({ 
     revert: true 
    }); 

    $(".draggable").draggable({ 
     connectToSortable:'.sortableCard', 
     revert: "invalid" 
    }); 
});

小提琴：http://jsfiddle.net/MxrrZ/

來源

2013-07-22 hamou92

看看http://jqueryui.com/sortable/#connect-lists

$(".sortableCard").sortable({ 
    connectWith: ".sortableCard" 
}).disableSelection();

來源

2013-07-23 00:00:38

感謝，這是工作！但有一點，當一個列表變空時，我們不再可以拖入它，我試圖添加「dropOnEmpty：true」，但它不起作用，我們如何解決這個問題？ – hamou92

默認情況下，dropOnEmpty爲true。你的問題是你沒有物理空間。給sortableCard類添加一個填充，然後當所有的div都離開它時你有東西。 http://jsfiddle.net/Wr56n/ –

謝謝，它的工作很棒;） – hamou92

你需要單獨列表這樣的，然後你會拖動從頂部列表任何產品底部的一個。

<body> 
    <div class="sortableCard1"> 
     <div class="draggable">car 5</div> 
     <div class="draggable">car 6</div> 
    </div> 
    <div class="sortableCard2" style="padding-top:40px"> 
     <div class="">car 1</div> 
     <div class="">car 2</div> 
     <div class="">car 3</div> 
    </div> 
</body> 

$(function() { 
    $(".sortableCard1").sortable({ 
     revert: true 
    }); 

     $(".sortableCard2").sortable({ 
     revert: true 
    }); 

    $(".draggable").draggable({ 
     connectToSortable: '.sortableCard2', 
     revert: "invalid" 
    }); 
});

來源

2013-07-22 23:26:18 zsong

我如何可以拖動排序元素轉換爲其他sortables元素

回答

相關問題