jQuery ui中sortable draggable droppable的使用

最近工做中用到了jQuery UI中排序和拖拽功能,花了大概一天的時間,搞清楚了大概的參數配置,以及遇到的一些問題,總結以下。javascript

sortable

簡單的配置以下:css

$('#subs-box').sortable({
    axis: 'y',
    cursor: 'ns-resize',
    placeholder: "ui-state-highlight", // 排序過程當中佔位符的class樣式設置
    forcePlaceholderSize: true, // 強迫佔位符有一個尺寸大小。
    handle:'.sort-at', // 在對象內指定的元素上開始拖動,而不是整個元素均可以拖動
    distance: 10,
    opacity: 0.8,
    containment:'parent', // 元素能夠拖動排序的範圍
    // helper: 'clone', // 是否clone一個元素進行拖動
    items: '.subject',  // 指定哪些元素能夠排序
    stop: function (e, ui) {
        // 排序後元素的順序(前提每一個元素都須要有id屬性)
        let newSubArr = $("#subs-box").sortable('toArray'); 
        console.log(newSubArr);
    },
}).disableSelection(); // 拖動時禁止選中元素

還有一些排序時候的事件和方法,都在參考連接的文檔裏面。html

draggable

dragInit() {
    let me = this;
    let selector = '.ptype-'+me.selectedSubType;
    
    // 題目拖動
    $('#subs-box .subject').draggable({
        // appendTo: ".ptype-item.radio", // 當進行拖動時,拖動組件助手應該被添加到的元素。
        // connectToSortable: "#subs-box", // 容許draggable被拖拽到指定的sortables中。
        
        // 拖動時使用的是clone的元素。若是值設置爲"clone", 那麼該元素將會被複制,而且被複制的元素將被拖動。
        // 之因此不使用 helper: 'clone', 是由於clone的元素沒有樣式,因此咱們須要自定義樣式,因此使用了自定義函數。
        helper: function() {
            let helper = $(this).clone();
            helper.css({'width': $(this).width(), 'background': '#fff'}); // 設置clone元素的樣式
            return helper;
        },
        handle: ".drag-at", // 指定在特定的元素上觸發鼠標按下事件時,才能夠拖動。
        cursor: 'move',
        // containment: '.sub-box', // 能夠限制draggable只能在指定的元素或區域的邊界之內進行拖動。
        revert: 'invalid', // 若是設置爲true,當拖動中止時,元素位置將被重置。
        revertDuration: 200,
        distance: 10,
        opacity: 0.8,
        zIndex: 10000,
        refreshPositions: true, // 全部的可拖動位置在每次鼠標移動時都會被計算。(設置該值使得drop的位置更加精確)
        start(event, ui) {
            $(selector).addClass('allow'); // 元素拖拽的時候,設置可放置元素的樣式,示意你能夠拖拽到那裏去
            // 開始拖拽的時候,初始化drop
            me.$nextTick(()=>{
                me.dropInit();
            });
        },
        stop(event, ui) {
            $(selector).removeClass('allow');
            // 拖拽中止的時候,銷燬drop函數。
            me.dropDestory();
        }
    }).disableSelection();

},

注意事項:java

每次dropInit函數初始化後,若是須要再次初始化,須要先銷燬以前的放置對象。不然第一次初始化後,好比某個地方A能夠放置拖拽的元素,可是第二次初始化後,地方A就不能夠放置了。然而實際上,若是你不把第一次初始化的dropInit函數銷燬掉,地方A在第二次初始化後仍是能夠放置的。因此須要在拖拽中止的時候,銷燬上一次的dropInit對象。jquery

dropable

dropInit() {
    let me = this;
    // 題目放置(設置題目根據不一樣類型能夠放置不一樣的分頁)
    // selector是可變的,也就是每次可拖拽元素可放置的元素是不一樣的。因此須要每次拖拽後清除以前dropInit對象。
    let selector = '.ptype-'+me.selectedSubType;

    $(selector).droppable({
        // accept: selector,
        // accept: function(d) {
        //     if($(this).hasClass('ptype'+me.selectedSubType)){
        //         console.log('d>>>>>>',$(this)[0]);
        //         return true;
        //     }
        // },
        // hoverClass: "drop-hover",
        tolerance: 'pointer', // 指定使用那種模式來測試一個拖動(draggable)元素"通過"一個放置(droppable)對象
        drop: function( event, ui ) {
            // $(this) 填充到的元素
            // ui.draggable.context 填充的元素
            let dragId = $(ui.draggable.context).attr('id');
            let dropId = $(this).attr('id');

            // 移動到新的分頁
            if(dropId === 'newpage') {
                me.moveAddPage(dragId);
            } else { // 移動題目到另外一個分頁
                if(dropId === me.selectedPage.id) { // 移動到本身的分組,不作處理

                } else {
                    let index = me.selectedPage.subs.indexOf(dragId);
                    if(index > -1) {
                        me.selectedPage.subs.splice(index, 1);

                        me.pages.forEach(page=>{
                            if(page.id === dropId) {
                                page.subs.push(dragId);
                            }
                        });

                        me.$openNotice('移動成功');
                        
                        // 其餘操做...
                    }
                }
            }

            $(this).removeClass('allow-hover');
        },
        over(event, ui) {
            $(this).addClass('allow-hover'); // 當拖拽元素進入可放元素時,可放置元素自己的樣式
        },
        out() {
            $(this).removeClass('allow-hover'); // 設置拖拽元素離開可放元素時,清除可放置元素自己的樣式
        }
    });
},
dropDestory() {
    let selector = '.ptype-'+me.selectedSubType;
    $(selector).droppable("destroy");
},

參考連接

相關文章
相關標籤/搜索