Bootstrap框架使用拖拽插件Nestable

最新推荐文章于 2024-09-08 09:40:33 发布

grey256

最新推荐文章于 2024-09-08 09:40:33 发布

阅读量1.4w

点赞数

分类专栏：前端技术文章标签： bootstrap nestable

本文链接：https://blog.csdn.net/u011832039/article/details/50965902

版权

本文介绍了在项目中使用Bootstrap框架的Nestable插件实现拖拽功能时遇到的问题，即当dd-list为空后无法再将dd-item拖回。作者通过查看Nestable源码找到了解决方案，并分享了代码修改的部分，强调该方案适用于单层结构（maxDepth = 1）。同时提醒，若在空的dd-list中生成dd-item时未正确处理，可能会导致额外的基本dd-item存在，需要用户自行处理。

摘要由CSDN通过智能技术生成

最近写个项目，前端页面需要使用拖拽功能，秉着不要重复造轮子的心态，在网上找到一个靠谱的插件Nestable，很好用。但在使用中依然发现了部分问题。最直观的一个就是当将一个dd-list中的所有dd-item元素都拖拽到其他地方时（此时该dd-list为空），此时如果想要再将某dd-item拖拽回该dd-list，就无法进行了。
硬着头皮去看了下Nestable的代码，还真找到了解决办法，希望对需要的人有帮助（由于前端属于半吊子水平，望多加指点）。
注释部分的Add和Modify处，是我修改的地方：

/*!
 * Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
 * Dual-licensed under the BSD or MIT licenses
 */
;(function($, window, document, undefined)
{
   
    var hasTouch = 'ontouchstart' in document;

    /**
     * Detect CSS pointer-events property
     * events are normally disabled on the dragging element to avoid conflicts
     * https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
     */
    var hasPointerEvents = (function()
    {
   
        var el    = document.createElement('div'),
            docEl = document.documentElement;
        if (!('pointerEvents' in el.style)) {
            return false;
        }
        el.style.pointerEvents = 'auto';
        el.style.pointerEvents = 'x';
        docEl.appendChild(el);
        var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';
        docEl.removeChild(el);
        return !!supports;
    })();

    var defaults = {
            listNodeName    : 'ol',
            itemNodeName    : 'li',
            rootClass       : 'dd',
            listClass       : 'dd-list',
            itemClass       : 'dd-item',
            dragClass       : 'dd-dragel',
            handleClass     : 'dd-handle',
            collapsedClass  : 'dd-collapsed',
            placeClass      : 'dd-placeholder',
            noDragClass     : 'dd-nodrag',
            emptyClass      : 'dd-empty',
            expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',
            collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
            group           : 0,
            maxDepth        : 5,
            threshold       : 20
        };

    function Plugin(element, options)
    {
   
        this.w  = $(document);
        this.el = $(element);
        this.options = $.extend({}, defaults, options);
        this.init();
    }

    Plugin.prototype = {

        init: function()
        {
   
            var list = this;

            list.reset();

            list.el.data('nestable-group', this.options.group);

            list.placeEl = $('<div class="' + list.options.placeClass + '"/>');

            $.each(this.el.find(list.options.itemNodeName), function(k, el) {
   
                list.setParent($(el));
            });

            list.el.on('click', 'button', function(e) {
   
                if (list.dragEl) {
                    return;
                }
                var target = $(e.currentTarget),
                    action = target.data('action'),
                    item   = target.parent(list.options.itemNodeName);
                if (action === 'collapse') {
                    list.collapseItem(item);
                }
                if (action === 'expand') {
                    list.expandItem(item);
                }
            });

            var onStartEvent = function(e)
            {
   
                var handle = $(e.target);
                if (!handle.hasClass(list.options.handleClass)) {
                    if (handle.closest('.' + list.options.noDragClass).length) {