多拖動可放開和排序的jQuery

Question

我檢查了這些：

Jquery draggable/droppable and sortable combined

jQuery UI: sortable and draggable + sortable and droppable

JQuery Draggable + Droppable + Sortable

所以，答案是沒有這些。

理論

• 我有2個元件，UL和OL。
• UL的列表項在OL去
• OL可排序

問題

• 我有多個這樣的UL和OL單頁上。
• 我需要確保UL的列表項不會輸入其他部分的OL。

你有什麼試過的？

$(function() { 
$(".fetchedfromdb li").draggable({ 
     appendTo: "body", 
     helper: "clone", 
     drag: function(){ 
      $(".sortintodb ol").droppable({ 
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       accept: ":not(.ui-sortable-helper)", 
       drop: function(event, ui) { 
        $(this).find(".placeholder").remove(); 
        $("<li></li>").text(ui.draggable.text()).appendTo(this); 
       } 
     }).sortable({ 
      sort: function() { 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
     } 
}); 
}); 

我笨部分：

<?php 
echo form_open('/data/process'); 
echo form_label('yep') . form_textarea('remarks'); 
foreach($dataFetched as $data => $field) { 
    echo "<h2>$data</h2> \n <ul class='fetchedfromdb'>"; 
     foreach($field as $f): 
      $fieldFetch = $data.'_1_1'; 
      echo '<li>'.$f->$fieldFetch.'</li>'; 
      echo "<br />"; 
     endforeach; 
    echo '</ul>'; 
    echo '<div style="background-color: #c3c3c3; height:100px">'; 
    echo "<ol class=\"sortintodb\" id=\"$data\">"; 
    echo '<li class="placeholder">Drop here</li> 
    </ol> 
    </div><hr />'; 
} 
echo form_submit('submit','Submit'); 
echo form_close(); 
?> 

通過CSS我已經確定，每一個輸出，直到家長的foreach結束自帶根據同款

有關這可怎麼實現的任何想法？

任何幫助，非常感謝。謝謝:)

什麼，我們正在尋找...

Answer 1

這裏是工作演示。Jsfiddle Demo

HTML

<ul class='fetchedfromdb' id="da1"> //parent element 
    <li id="1">Data1</li> 
    <br /> 
    <li id="2">Data2</li> 
    <br /> 
    <li id="3">Data3</li> 
    <br /> 
<div style="background-color: #c3c3c3; height:100px"> 
    <ol class="sortintodb" id="e201"> 
     <li class="placeholder" id="9">Drop here</li> 
    </ol> 
</div> 
</ul>//ends 

<hr /> 
<h2>e202</h2> 
<ul class='fetchedfromdb'> 
    <li id="5">Data1</li> 
    <br /> 
    <li id="6">Data2</li> 
    <br /> 
    <li id="7">Data4</li> 
    <br /> 
<div style="background-color: #c3c3c3; height:100px"> 
    <ol class="sortintodb" id="e202"> 
     <li class="placeholder" id="8">Drop here</li> 
    </ol> 
</div> 
</ul> 
<hr /> 

腳本

$(".fetchedfromdb li").draggable({ 
     containment: 'parent', 
     helper: "clone", 
     connectToSortable: '.sortable', 
    }); 
    $(".sortintodb").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var self = $(this); 
     //if you don't want same "data" in placeholder more than once 
     self.find(".sortintodb").remove(); 
     var dropId = ui.draggable.attr('id'); 
     if (self.find("[id=" + dropId + "]").length) return; 
     $("<li></li>", { 
      "text": ui.draggable.text(), 
      "id": dropId 
     }).appendTo(this); 
    }, 
    }); 
    $('.sortintodb').sortable({ 
     placeholder: "ui-state-highlight", 
    }); 

Answer 2

所以我猜你想有一些代碼，您所訂購的產品更新數據庫「視覺」代表/下降了嗎？

在你的jQuery .drop & .sort函數有一些代碼運行jquery ajax來將數據發佈到控制器。控制器可以讓您的模型重新排序數據以模擬屏幕上顯示的內容。

下面是我用來做這個例子的代碼。所以一般而言，它會獲取一些數據，將其發送到服務器，並整理本地屏幕副本。 我的ajax_post方法相當複雜，但其功能是將數據發送到服務器，並處理回覆。

drop: function(event, ui) { 
     var row = ui.draggable.context.id; 
     var data = {id:row.substr(row.lastIndexOf('_')+1),mr_id:o.mr_id,type:o.type} 
     ajax_post('patients/row_remove',data); 
     $('#'+row).remove(); 
     setup_row_banding(o.container + ' .med_row'); 
    } // end drop 

Answer 3

請檢查該更新的小提琴，讓我知道如果任何額外的行爲需要

• 加入 '空' 類要列出這樣他們就可以作爲放置目標時，空和一些視覺風格可以適用

http://jsfiddle.net/a8BAY/2/

$(function() { 
    $('.sortable').sortable().disableSelection(); 

    $(".draggable li").draggable({ 
     revert: true 
    });  

    $('.droppable').droppable({ 
     drop: function(e, ui) { 
      var el = $('<li></li>').text($(ui.draggable).text()).appendTo($(this)); 


      if($(ui.draggable).parent().find('li').size() == 1) 
       $(ui.draggable).parent().addClass('empty'); 
      else 
       $(ui.draggable).parent().removeClass('empty'); 

      $(ui.draggable).remove(); 

      if($(this).find('li').size() == 1) 
       $(this).addClass('empty'); 
      else 
       $(this).removeClass('empty'); 

      if($(this).is('.sortable')) { 
       $(this).sortable("refresh"); 
       $(this).sortable("refreshPositions");    
      } else { 
       $(el).draggable({ 
        revert: true 
       });  
      } 

     }, 
     accept: function(draggable) { 
      return $(draggable).parent().data('section') == $(this).data('section') && !$(draggable).parent().is($(this));    
     } 
    }); 
});