多个可拖动、可放置和可排序的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" );
            }
        });
        }
});
});

我的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，我确保了每个输出直到父级循环结束都在同一部分下。

有关如何实现此功能的任何想法？

非常感谢您的帮助。谢谢：）

我们正在查看的'可视化'表示形式...

- Keval Domadia

Answer 1

这是一个工作演示。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",
    });

- karmicdice

Answer 2

请检查此更新的fiddle，并告知是否需要任何额外的行为。

• 将“empty”类添加到列表中，以便它们可以在为空时充当放置目标，并且可以应用一些视觉样式

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));              
        }
    });
});

- Loken Makwana

---

修复了与可排序的占位元素相关的问题：http://jsfiddle.net/a8BAY/4/。 - Loken Makwana

Answer 3

所以我猜你想要一些代码来更新数据库中你所订购/删除的内容？

在你的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

- pgee70

---

谢谢，伙计，但这只是一个Ajax帮助...我不想让事情变得ajax化...我只想实现可拖放和可放置，并隔离每个部分...最后有一个提交按钮。 - Keval Domadia