私はこれらをチェックしました:
Jqueryのドラッグ/ドロップ可能およびソート可能の組み合わせ
jQuery UI: 並べ替え可能でドラッグ可能 + 並べ替え可能でドロップ可能
JQuery ドラッグ可能 + ドロップ可能 + ソート可能
したがって、答えはこれらのどれでもありません。
仮説
- UL と OL の 2 つの要素があります。
- ULのリストアイテムはOLに入れなければならない
- OLはソート可能
問題
- このような UL と OL が 1 つのページに複数あります。
- UL の List Items が他のセクションの 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" );
}
});
}
});
});
私のCOdeIgniter部分:
<?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 が終了するまでのすべての出力が同じセクションにあることを確認しました
これをどのように実装できるかについてのアイデアはありますか?
どんな助けでも大歓迎です。ありがとうございました :)
私たちが見ているものの「視覚的」表現...