首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery draggable revert基于条件

是一个jQuery UI插件中的一个选项,用于设置拖动元素在拖动结束后是否返回到初始位置。

当设置为true时,拖动元素会在拖动结束后返回到初始位置。当设置为false时,拖动元素会保持在拖动结束时的位置。而基于条件的设置允许我们根据特定条件来决定拖动元素是否返回到初始位置。

在使用该选项时,我们可以通过提供一个函数来定义条件。这个函数会在拖动结束后被调用,并且会传入两个参数:event和ui。我们可以根据这些参数来判断是否满足条件,如果满足条件则返回true,否则返回false。

以下是一个示例代码:

代码语言:javascript
复制
$("#draggable").draggable({
  revert: function(event, ui) {
    // 根据条件判断是否返回到初始位置
    if (/* 满足条件 */) {
      return true;
    } else {
      return false;
    }
  }
});

在这个示例中,我们使用了一个id为"draggable"的元素,并将其设置为可拖动。通过设置revert选项为一个函数,我们可以根据条件来决定是否返回到初始位置。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供了弹性计算能力,可以快速创建、部署和扩展云服务器实例,适用于各种应用场景。详情请参考:腾讯云云服务器(CVM)
  • 腾讯云对象存储(COS):提供了安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。详情请参考:腾讯云对象存储(COS)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用jQuery UI的draggable和droppable完成拖拽功能--介绍

    项目中主要使用到jQuery UI里面的draggable和droppable,因为很多老的浏览器都不值html5的drag api。...我自己也没有去查看zTree的源代码,所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。...完成最后的功能界面如下,完成通过拖拽数据到右边可以计算出符合条件的人数。 ? 江西财经大学和“东华理工大学”是或的一个关系,而他们整体和”南昌航空大学“又是”且“的关系,当然也可以是”排除“关系。...第三部分--方案思路: 1.了解jQuery draggable和droppable方法和工作原理 2.递归思想 3.各个击破 4.熟练使用jQuery操作dom结构 第四部分--参考网址: 1.http...://www.ztree.me/v3/main.php 2.http://jqueryui.com/draggable/ 3.http://jqueryui.com/droppable/

    2.2K50

    treetable php,jQuery树型表格插件jQuery treetable

    插件描述:jQuery-treetable是一个jQuery插件。有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。...jQuery-treetable 有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。它使你的HTML文件干净的,展现出树状表格插件,你只需要每一行数据添加特定的数据属性。...selected”); }); // Drag & Drop Example Code $(“#example-advanced .file, #example-advanced .folder”).draggable...({ helper: “clone”, opacity: .75, refreshPositions: true, revert: “invalid”, revertDuration: 300, scroll...ttId”), $(this).data(“ttId”)); }, hoverClass: “accept”, over: function(e, ui) { var droppedEl = ui.draggable.parents

    1.8K30

    自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版。...过程中多次触发 * "draggable.stop":drag结束触发,就是鼠标up后触发 */ //draggable常量 $.zUI.draggable = { defaults...); } } 须要说明的有几点: 1.鼠标落下后,要记录鼠标相对元素的位置,mousemove的过程中,要把这段距离减去; 2.jQuery的data方法,这种方法很方便,能够讲数据和相应的元素绑定...3.undraggable就是把事件函数去掉了 4.jQuery的on方法很强大,加入�后还能够使用trigger方法来触发,有兴趣的同学能够到官方看看API,on方法很暴躁,这里的自己定义函数,就是用这两个方法实现的...最后,用一个匿名函数自运行把他们都包起来,为了防止$符号被其它的插件使用,传一个jQuery过去: (function($){ ....... })(jQuery); 到此为止,

    1K20

    基于jQuery UI CSS Framework开发Widget

    我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。...jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller...css3,ie不支持 .ui-corner-tr:右上角圆角,基于css3,ie不支持 .ui-corner-bl:左下角圆角,基于css3,ie不支持 .ui-corner-br:右下角圆角,基于css3...,ie不支持 .ui-corner-top:上面两个角圆角,基于css3,ie不支持 .ui-corner-bottom:底部两个角圆角,基于css3,ie不支持 .ui-corner-right:右部两个角圆角...,基于css3,ie不支持 .ui-corner-left:左部两个角圆角,基于css3,ie不支持 .ui-corner-all:全部角圆角,基于css3,ie不支持 .ui-widget-overlay

    1.8K100

    基于Spring的@Conditional注解进行条件加载

    0x01:@Conditional使用 Spring Boot的强大之处在于使用了Spring 4框架的新特性:@Conditional注释,此注释使得只有在特定条件满足时才启用一些配置。...@ConditionalOnBean:当容器中有指定Bean的条件下进行实例化。 @ConditionalOnMissingBean:当容器里没有指定Bean的条件下进行实例化。...@ConditionalOnClass:当classpath类路径下有指定类的条件下进行实例化。 @ConditionalOnMissingClass:当类路径下没有指定类的条件下进行实例化。...@ConditionalOnExpression:基于SpEL表达式的条件判断。 @ConditionalOnJava:当JVM版本为指定的版本范围时触发实例化。...@ConditionalOnJndi:在JNDI存在的条件下触发实例化。

    2.8K20
    领券