javascript - Uikit.nestable组件-如何从移动的项目中获取ID

我正在使用uikit框架，并对可嵌套组件有疑问。

我一直在咨询哪里可以找到解决方案，但似乎没有人和我一样。

可能是由于我对javascript的了解不足，但是阅读它们在UIKit网站上提供的有关可用事件的信息，我无法获得所需的信息。

我在html上有这些代码，用于创建可嵌套的组。用于将项目从一组左移，另一组右移。

<div class="uk-grid uk-grid-width-1-2">
    <div>
        <h3>Disabled</h3>
        <!-- Group A -->
        <div class="uk-margin">
            <div class="ptm-nestable-title">
                <i class="uk-icon uk-icon-plus-square-o uk-margin-small-right"></i> <strong>Main perms</strong>
            </div>
            <div class="ptm-nestable-list">
                <ul class="uk-nestable" data-uk-nestable="{group:\'group-a\', maxDepth:1}" id="groupADisable">
                    <li class="uk-nestable-item" id="manageUsers">
                        <div class="uk-nestable-panel">
                            <strong>Users</strong> - Manage
                        </div>
                    </li>
                    <li class="uk-nestable-item" id="manageRepairs">
                        <div class="uk-nestable-panel">
                            <strong>Repairs</strong> - Manage
                        </div>
                    </li>
                    <li class="uk-nestable-item" id="managePhone">
                        <div class="uk-nestable-panel">
                            <strong>Phonecalls</strong> - Manage
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Group B -->
        <div class="uk-margin">
            <div class="ptm-nestable-title">
                <i class="uk-icon uk-icon-plus-square-o uk-margin-small-right"></i> <strong>Private perms</strong>
            </div>
            <div class="ptm-nestable-list">
                <ul class="uk-nestable" data-uk-nestable="{group:\'group-b\', maxDepth:1}" id="groupBDisable">
                    <li class="uk-nestable-item">
                        <div class="uk-nestable-panel" id="nameA">
                            <strong>Name A</strong> - Description
                        </div>
                    </li>
                    <li class="uk-nestable-item" id="nameB">
                        <div class="uk-nestable-panel">
                            <strong>Name B</strong> - Description
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- END - GROUPS LEFT -->
    </div>
    <!-- RIGHT -->
    <div>
        <h3>Enabled</h3>
        <!-- Group A -->
        <div class="uk-margin">
            <div class="ptm-nestable-title">
                <i class="uk-icon uk-icon-plus-square-o uk-margin-small-right"></i> <strong>Main perms</strong>
            </div>
            <div class="ptm-nestable-list">
                <ul class="uk-nestable" data-uk-nestable="{group:\'group-b\', maxDepth:1}" id="groupAEnable">

                </ul>
            </div>
        </div>
        <!-- Group B -->
        <div class="uk-margin">
            <div class="ptm-nestable-title">
                <i class="uk-icon uk-icon-plus-square-o uk-margin-small-right"></i> <strong>Private perms</strong>
            </div>
            <div class="ptm-nestable-list">
                <ul class="uk-nestable" data-uk-nestable="{group:\'group-b\', maxDepth:1}" id="groupBEnable">
                </ul>
            </div>
        </div>
        <!-- END - GROUPS RIGHT -->
    </div>
</div>

我可以从左到右分别无缝移动。

但是，使用网络上可用的事件无法从项目中获取ID。
https://getuikit.com/docs/nestable.html

我使用代码，然后仅在两个事件中获取了源组和目标组的ID。

$('.uk-nestable').on('change.uk.nestable', function(e) {
    console.log($(this).attr('id');
});

如果更改并代替组（.uk-nestable），则项目（.uk-nestable-item）无法接收任何内容。

$('.uk-nestable-item').on('change.uk.nestable', function(e) {
    console.log($(this).attr('id');
});

尽管它在网络上列出，但该项目应该有一个事件。


  .change.uk.nestable事件，可排序对象，拖动的元素，
  行动


我先感谢您的帮助



更新

我尝试做其他的事情，但是在控制台上，我收到的消息太多了。

UIkit.ready(function() {
    var linea = UIkit.nestable(UIkit.$('.uk-nestable-item'));
    linea.on('change.uk.nestable', function () {
        console.log($(linea.placeEl).attr('id'));
    });
});

最佳答案

如果有人需要帮助，也发布解决方案...

经过深思熟虑，我已经...

    UIkit.ready(function() {
    $('.uk-nestable').on({
        'stop.uk.nestable': function(e, el, type){
            //console.log(e);
            //console.log(el);
            console.log(type.attr('id'));
            console.log(type.parent().attr('id'));
        }
    });
});