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

在可拖动对象上不触发jQuery UI可选事件

是指在使用jQuery UI库中的可拖动功能时,希望在拖动对象上不触发可选事件。

可拖动对象是指网页中的元素,通过jQuery UI的拖动功能可以使这些元素可以被拖动。可选事件是指在拖动对象上触发的事件,例如点击、双击、鼠标移入等。

为了在可拖动对象上不触发可选事件,可以通过以下步骤实现:

  1. 使用jQuery UI的draggable()方法将元素设置为可拖动对象。例如:
代码语言:javascript
复制
$("#draggable").draggable();
  1. 使用jQuery的off()方法移除可选事件的绑定。例如,如果要移除点击事件的绑定:
代码语言:javascript
复制
$("#draggable").off("click");
  1. 使用jQuery的on()方法重新绑定可选事件的处理函数。在处理函数中,可以通过返回false来阻止事件的默认行为。例如,重新绑定点击事件的处理函数:
代码语言:javascript
复制
$("#draggable").on("click", function() {
  return false;
});

通过以上步骤,可拖动对象上的可选事件将不会被触发。这在一些特定的场景中可能会有用,例如当拖动对象上有其他交互元素时,希望在拖动过程中不触发这些元素的点击事件。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

FullCalendar 日历插件中文说明文档

ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。 ...Event Object,事件对象,用来存储一个日历事件信息的标准对象,只有title和start是必须的 属性 描述 id 可选事件唯一标识,重复的事件具有相同的id title 必须,事件日历显示的...日程事件拖动和缩放 拖动和缩放功能依赖于jQuery ui的draggable和resizable,所以使用时要提前加载jQuery ui相关插件。...属性 描述 默认值 editable 是否可编辑,即进行拖动和缩放操作。 false eventStartEditable 是否让事件开始时就可以拖动。...这里的拖动不一定是一个有效的拖动,只要日程事件的控件被拖着动了,事件触发。 可以从该对象中获取位移,位置等数据。

30.5K90

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI(interactjs更加纯粹)。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现,更加方便(省去计坐标计算等)。...,被拖拽对象离开目标对象触发拖动事件列表每一个拖动的元素,拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束拖动目标上触发事件 (源元素-被拖动的元素):ondragstart...- 元素开始被拖动时候触发——拖动什么ondrag - 元素被拖动时反复触发ondragend - 拖动操作完成时触发释放目标时触发事件(目的地对象):ondragenter - 当被鼠标拖动对象进入其容器范围内时触发事件...进行放置针对对象事件名称说明被拖动的元素dragstart元素开始被拖动时候触发drag元素被拖动时反复触发dragend拖动操作完成时触发目的地对象dragenter当被拖动元素进入目的地元素所占据的屏幕空间时触发

6.1K21

html5鼠标拖动排序及resize实现方案分析及实践

对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现,更加方便(省去计坐标计算等)。...为了使元素拖动,必须把 draggable 属性设置为 true : test[object Object] 整个拖拽事件触发的顺序如下...源对象事件: dragstart:源对象开始拖放,开始移动时事件触发 drag:源对象拖放过程中,移动被拖拽对象触发 dragend:源对象拖放结束,整个拖放操作结束时触发。...,被拖拽对象离开目标对象触发 目标对象事件: drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象触发,可理解为目标对象内松手时触发

3K10

jQuery (二)

; // 触发没有命名空间的单击处理程序 或者如下 // 单击一将会触发事件 $('#button1').click((e) => {$('#button2').trigger('button2'...)}); // 触发事件时,将会添加额外的属性给事件对象,如果事件以前被监听,将会被直接触发 $('#button1').trigger({ type:'click', synthetic:true }...实时事件 实时事件为,如果先前将所有a元素绑定了一个事件,接着创建一个新的a的节点,如果此时触发事件,则新创建的a元素不会被触发事件,因为绑定的不是实时的事件。...{ return e.draggable === true; } 使用 $('img:draggable'); 等价于 $('img[draggable=true]') 上方封装的一个选择器为拖动的元素...文件命名需要使用jquery.plugin.js jQueryUI库 https://jqueryui.com/ ps 该库已经两年未更新了,不过lssues 依旧回复中,对于库的检查 https:

9.3K30

Python全栈之jQuery笔记

主动触发事件: 可使用jquery对象的trigger方法来触发对象绑定的事件....; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素,避免把事件处理器添加到多个子级元素),它还可以让你在对象层的不同级别捕获事件....jQuery对象的方法会在执行完后返回这个jQuery对象,所有jQuery对象的方法可以连起来写.下列的方法都返回jQuery对象,链式调用: $('#div1') // id...,touch事件包括如下几个事件: 1、touchstart: 手指放到屏幕触发 2、touchmove: 手指在屏幕滑动式触发 3、touchend

5.4K40

用于H5的移动开发框架

jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...其中WeX5为国内打造,完全Apache开源,融合Phonegap的基础,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。...webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

4.8K10

用于H5的移动开发框架

框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架 1 jquery mobile框架   jQuery Mobile是jQuery 在手机上和平板设备的版本...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...其中WeX5为国内打造,完全Apache开源,融合Phonegap的基础,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。...webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

5K40

HTML5移动开发的10大移动APP开发框架

jQuery 在手机上和平板设备的版本。...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。   ...其中WeX5为国内打造,完全Apache开源,融合Phonegap的基础,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。   ...webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

6.4K10

Vue.Draggable 文档总结

特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的...和v-model不能共用 从表现没有看出不同 element String,默认div 就是标签在渲染后展现出来的标签类型 也是包含拖动列表和插槽的外部标签 可以用来兼容UI...对象是否可用,为true时sortable对象不能拖放排序等功能 store: animation: umber 单位:ms 动画时间 handle: selector 格式为简单css...可设置为多个选择器,中间用“,”分隔 preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发 draggable: selector...用来代理UI组件需要绑定的属性(:) on用来代理UI组件需要绑定的事件(@) <draggable element="el-collapse" :list="list" :component-data

8.5K20

ASP.NET MVC5+EF6+EasyUI 后台管理系统(86)-日程管理-fullcalendar插件用法

,其中只有title和start是必须的 但是我们可以全建来获得完整的数据支持 属性 描述 id 可选事件唯一标识,重复的事件具有相同的id title 必须,事件日历显示的title allDay...可选,true or false,是否是全天事件。...start 必须,事件的开始时间。 end 可选,结束时间。 url 可选,当指定后,事件被点击将打开对应url。 className 指定事件的样式。...editable 事件是否可编辑,可编辑是指可以移动, 改变大小等。 source 指向次event的eventsource对象。 color 背景和边框颜色。...1.select 选择日期触发(弹出新增的框[新增]) 2.eventDrop 拖拽触发(拖动改变日期或者延长缩短[修改]) 3.eventClick 点击事件(进一步查看明细或者[修改]) 4.eventDrop

2.6K100

jquery mobile 移动web(6)

jquery mobile 针对移动端设备的事件类型。   1.touch 事件。     tap 快速触摸屏幕并且离开,类似一种完整的点击操作。     ...swipe 1秒内水平移动30px屏幕像素触发。     swipeleft 向左侧滑动     swiperight 像右侧滑动。   ...2.方向改变事件     orientationchange 事件函数当移动设备的方向发生改变触发事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,     该参数有两种返回值:portrait...4.显示/隐藏     pagebeforeshow 当视图通过动画效果开始显示屏幕之前触发事件。     ...pagebeforehide 当视图通过动画效果开始隐藏之前触发事件,     pageshow 当视图通过动画效果显示屏幕之后触发事件

1.3K100

弹出层之1:JQuery.Boxy (二)

《弹出层之1:JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法,本次讲下手动创建实例,new一个boxy对象是很容易的,传递一些参数对象就能满足不同的需求了。...getInner() 返回一个jQuery对象包装对话框的内部区域-框架内包括标题栏一切。 getContent() 返回一个jQuery对象包装对话框的内容区域-框架内的一切,不包括标题栏。...链接。 moveTo(x,y) 移动对话框到左上角为(x,y)的位置,链接。 centerAt(x,y) 把对话框移动到中心坐标为(x,y)的位置。...center(axis) 移动对话框,使其视野的中央。可选参数axis可以是"x","y"中的任意一个中心轴。链接。...show() 显示对话框,链接。 hide(after) 隐藏对话框,after为可选回调函数,完成后执行。链接。 toggle() 触发对话框的显隐属性。链接。

4K20

HTML5新特性

成员事件 ①. onplay:当视频开始播放时触发事件 ②. onpause:当视频开始暂停时触发事件 11....成员事件 ①. onplay:当视频开始播放时触发事件 ②. onpause:当视频开始暂停时触发事件 12....拖动的源对象(会动)可以触发事件: ①. dragstart:拖动开始 ②. drag:拖动中 ③. dragend:拖动结束 整个拖动过程: dragstart*1 + drag*n +...拖动的目标对象(不动)可以触发事件: ①. dragenter:拖动着进入(取决于鼠标进入没有) ②. dragover:拖动着悬停在上方 ③. dragleave:拖动着离开 ④. drop:在上方释放...拖动对象和目标对象间传递数据,拖动开始时(src.ondragstart)记录被拖动元素的ID,释放时(target.ondrop)根据ID查找拖动的源对象,进行相关操作: 方法1:使用一个全局变量

7.6K30

vue 中基于html5 drag drap的拖放

事情是这样的,右边有各种控件,可以拖动到右边自由区,自由区内可以随意拖动。 案例一: 开始的我,so easy!...以上代码并不能满足需要,要左右布局,左边的拖到右边,右边区域随便拖动。 案例二: 好吧,首先我来布个局,左右布局,给元素绑定事件,上代码!...直接看代码好了,反正是给我自己看的):左边列表元素拖动(draggable=’true’),绑定dragstart(开始事件),不要给它绑定draging(拖动事件),这样左边列表元素有拖动属性,但是位置不会改变...当右侧拖动区域 第一次触发了drop 操作后,新生成一个对象,这个对象既有拖动(draggable=’true’)属性,也绑定dragstart(开始事件),拖动事件(drag),这样新元素会在右侧随意拖动...每次拖动元素都会触发drop 事件,并不是每次都要生成一个新元素,要知道是从左边列表拖到右侧第一次drop 的时候生成新元素。怎么知道呢?

1.4K00
领券