jQuery ui中sortable draggable droppable的使用

来源:https://www.cnblogs.com/lvonve/archive/2020/07/23/13367038.html
-Advertisement-
Play Games

最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的時間,搞清楚了大概的參數配置,以及遇到的一些問題,總結如下。 sortable 簡單的配置如下: $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholde ...


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

sortable

簡單的配置如下:

$('#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(); // 拖動時禁止選中元素

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

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

},

註意事項:

每次dropInit函數初始化後,如果需要再次初始化,需要先銷毀之前的放置對象。否則第一次初始化後,比如某個地方A可以放置拖拽的元素,但是第二次初始化後,地方A就不可以放置了。然而實際上,如果你不把第一次初始化的dropInit函數銷毀掉,地方A在第二次初始化後還是可以放置的。所以需要在拖拽停止的時候,銷毀上一次的dropInit對象。

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

參考鏈接


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 快速反饋對於任何 UI 的實現都是至關重要的。研究表明,100ms 是界面讓用戶感到即時的最大延遲。儘管如此,移動網路仍然受到一個巨大的反饋問題的困擾:觸摸任何元素後,延遲 300 毫秒。這種延遲是許多用戶認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中,本文將帶你瞭解移動... ...
  • 一個網站建立以後,如果不註意安全方面的問題,很容易被人攻擊,下麵就討論一下幾種漏洞情況和防止攻擊的辦法。 一、SQL註入 所謂SQL註入,就是通過把SQL命令插入到Web表單提交或輸入功能變數名稱或頁面請求的查詢字元串,最終達到欺騙伺服器執行惡意的SQL命令。具體來說,它是利用現有應用程式,將(惡意)的SQ ...
  • 通過 javascript 偽協議, HTML5 dialog 元素實現的分屏書簽程式 ...
  • 俗話說,出來江湖混的,持善良之心,懷正義之氣,總有志同道合者共相為謀。而HTML也有這麼幾個大哥們er、小兄dei、小寶貝兒。他們一起乾大事,為服務好普羅大眾貢獻自己一份力量,接下來讓我們一起走進他們吧。 ...
  • 什麼是 DOM? 如果我們把這個 HTML 載入到瀏覽器中,瀏覽器創建這些節點,用來顯示網頁。所以這個HTML映射到一系列DOM節點,然後我們可以使用JavaScript進行操作。例如: let item = document.getElementByTagName('h1')[0] item.te ...
  • 微信端返回按鈕 WeixinJSBridge.call('closeWindow'); $("#close").click(function(){ setTimeout(function(){WeixinJSBridge.call('closeWindow');},1000); }) ...
  • BOM(瀏覽器對象模型)簡介、window對象、location對象、history對象、navigator對象、screen對象、document對象 ...
  • 效果圖看左上角 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基於CSS3的3D立方體旋轉動畫</title> <style> /* 3d旋轉樣式 */ .cub { width: 2.5rem; height: ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...