4

私はこれらをチェックしました：

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 が終了するまでのすべての出力が同じセクションにあることを確認しました

これをどのように実装できるかについてのアイデアはありますか?

どんな助けでも大歓迎です。ありがとうございました ：）

私たちが見ているものの「視覚的」表現...

並べ替えで複数のドラッグ アンド ドロップを分離

4

3 に答える 3

4

これがワーキングデモです。Jsfiddle デモ

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",
    });
于 2013-10-15T17:04:05.270 に答える