jQuery ui中sortable draggable droppable的使用

时间: 2020-06-24阅读: 81标签: jquery

最近工作中用到了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");
},
原文github仓库地址,已更新一百多篇,欢迎star。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9513

关闭

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

js和jquery设置css的几种方式

js设置样式的方法: 直接设置style的属性 某些情况用这个设置 !important值无效、直接设置属性(只能用于某些属性,相关样式会自动识别); 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

jquery设置属性attr

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。attr(属性名)、attr(属性名, 属性值)、attr(属性名,函数值)、attr(properties)

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

jQuery实现全选、全不选以及反选操作

在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug

jquery中toggleClass(), index()

toggleClass()对设置货已出被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类,如果不存在则添加类,如果已设置则将之删除。这就是所谓的切换效果,不过通过“switch”参数,只能够规定只删除或者添加类。

jquery版本过低安全漏洞问题

最近在做项目的时候扫描除了很多js版本过低的问题,主要集中在1.x 2.x 还有1.12jQuery&<2.2 jQuery,过滤用户输入数据的正则存在缺陷,可能造成跨站漏洞,具体修复介绍可以查看官方。

Jquery插件开发的方法总汇

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广