Nestedsortable和draggable列表 [英] Nestedsortable and draggable list

问题描述

Hi

I would like to use the same thing as in the draggable/sortable demo :
http://jqueryui.com/draggable/#sortable

but with nested sortable
https://github.com/mjsarfatti/nestedSortable.

Both works well but I can't add the draggable element into the nestedSortable list and do it also sortable. Can someone help me with this please?

Thanks

我尝试过：

What I have tried:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery.mjs.nestedSortable.js"></script>
    
    <div class="cf nestable-lists">
        <div class="dd" id="toolList">
            Parent List 
            <ul id='tools'>
                <li>
                    Router Architecture
                </li>
                <li>
                    Customer
                    <ul>
                        <li>Customer Segment</li>
                        <li>Value Proposition</li>
                        <li>Cost / Revenue</li>
                        <li>Supporting Infrastructure</li>
                        <li>Customer Interface</li>
                    </ul>
                </li>
                <li>
                    Product / Service
                </li>
                <li>
                    Product / Service Sub-Component
                </li>
                <li>
                    Function
                </li>
                <li>
                    Attribute
                </li>
                <li>
                    Issues
                </li>
                <li>
                    Risks
                </li>
            </ul>
        </div>
        <div class="dd" id="rootList">
            Child List
            <ul id='list1'>
                <li><div>Some</div></li>
                <li>
                    <div>Test</div>
                    <ul>
                        <li><div>My Innovation Architectures</div></li>
                        <li><div>All Innovation Architectures</div></li>
                    </ul>
                </li>
                <li><div>Thing</div></li>
            </ul>
        </div>
    
    </div>
    <script>
    
        jQuery(function ($) {
            
            $('#tools li').draggable({
                cursor: 'move',
                helper: 'clone',
                connectToSortable: "#list1",
            });
            
            updateList();
            function updateList() {
                console.log('updateList()');
                $('#list1').nestedSortable({
                    handle: 'div',
                    items: 'li',
                    toleranceElement: '> div',
                })
                    .sortable({
                        revert: true,
                        update: function (event, ui) {
                            $('.next, .prev').removeClass('next prev');
                            var $prevElem = ui.item.prev(),
                                $nextElem = ui.item.next();
                            $prevElem.addClass('prev');
                            $nextElem.addClass('next');
                            // Trying to re-initialize here.
                            updateList();
                        }
                    });
            }
        });
    
    </script>

推荐答案

）{

（'#tools li'）。draggable（{
cursor：'move'，
helper：'clone'，
connectToSortable：＃list1，
}）;

updateList（）;
函数updateList（）{
console.log（'updateList（）'）;

('#tools li').draggable({ cursor: 'move', helper: 'clone', connectToSortable: "#list1", }); updateList(); function updateList() { console.log('updateList()');

（'＃list1'）。nestedSortable（{
handle ：'div'，
项目：'li'，
toleranceElement：'> div'，
}）
.sortable（{
revert：true，
update：function（event，ui）{

('#list1').nestedSortable({ handle: 'div', items: 'li', toleranceElement: '> div', }) .sortable({ revert: true, update: function (event, ui) {

这篇关于Nestedsortable和draggable列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！