本篇文章主要为大家讲述的技术关于draggable属性实现页面拖动的效果,往下读下去,一步步的你会发现这个其实也不是很难,现在让我们一起来看这篇文章吧
本篇文章就是介绍Draggable(拖动)即实现页面元素的拖动效果的,所以,一步一步的来。
一、加载方式(首先是加载方式)
1.css样式加载:
<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;"> 内容部分 </div>
使用css样式加载Draggable,方便快捷,但是不利于管理,所以我们有课第二种加载方式,使用Jquery方式加载,一般我们都会使用Jquery的方式进行加载。
2.Jquery方式加载:
//不加属性 $('#box').draggable(); //JS部分 $('#box').draggable({ revert : true, //拖动后是否回到起始位置,boolean类型 cursor : 'text', //鼠标拖拽样式,十字,文本等 handle : '#pox', //句柄,设置后只在设置后只能在当前元素下实现拖拽 disabled : false, //设置是否可以被拖拽 edge : 50, //设置边界往内多大距离可以实现拖拽 axis : 'v', //设置拖拽方向,v:垂直拖拽,h:水平拖拽 proxy: 'clone', //设置代理元素,使用clone时为复制当前元素 deltaX : 10, //被拖拽元素左上角距离当前光标的X轴方向的距离 deltaY : 10, //被拖拽元素左上角距离当前光标的Y轴方向的距离 proxy: function(source){ //自定义代理元素 var p = $('<div style="border:1px solid #ccc;width:400px;height:200px;"></div>'); p.html($(source).html()).appendTo('body'); return p; }, }); //HTML部分 <div id="box" style="width:400px;height:200px;background:red;"> 内容部分 </div>
二、事件(第二是事件)
1.onBeforeDrag 拖动前发生
$('#box').draggable({ onBeforeDrag : function (e) { alert('拖动之前触发!'); //return false; } });
在拖动前发生,既当鼠标点击元素时发生,当返回false时将无法拖拽,我们不会让它直接返回false,因为这样没有任何意义,在使用时应该有充足的逻辑判断。
2.onStartDrag 拖动开始时发生
$('#box').draggable({ onStartDrag : function (e) { alert('拖动开始时触发!'); //return false; } });
在鼠标点击后拖动的一瞬间执行,执行时间在onBeforeDrag之后。
3.onDrag拖拽过程中执行
$('#box').draggable({ onDrag : function (e) { alert('拖动过程中触发!'); } }); 在拖
动的过程中执行,当鼠标一移动就会执行,当不能拖动时返回false
4.onStopDrag 拖动停止后发生
$('#box').draggable({ onStopDrag : function (e) { alert('在拖动停止时触发!'); } });
在拖动结束后触发,即松开鼠标时执行,无返回值。
5.以上事件可组合使用,执行顺序为onBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag
$('#box').draggable({ onBeforeDrag : function (e) { alert('拖动之前触发!'); //return false; }, onStartDrag : function (e) { alert('拖动时触发!'); }, onDrag : function (e) { alert('拖动过程中触发!'); }, onStopDrag : function (e) { alert('在拖动停止时触发!'); },});
三、方法(第三是方法)
方法名:说明
option :返回属性对象
proxy :如果代理属性被设置则返回该拖动代理元素
enabl :允许拖
disable :禁止拖动
//返回属性对象 console.log($('#box').draggable('options')); //返回代理元素 onStartDrag : function (e) { console.log($('#box').draggable('proxy')); }, //禁止拖动 $('#box').draggable('disable'); //允许拖放 $('#box').draggable('enable');
四、设置默认属性(这是最后一个设置)
在一次设置后当前页面所有拖拽都会共享这个属性,不用再去设置。
$(function(){ $.fn.draggable.defaults.cursor = 'text'; });
以上就是这篇关于draggable属性的页面拖动方面的全部内容了(想学更多就来PHP中文网),有问题的可以在下方提问。
【小编推荐】
html中的ol标签如何去掉标号呢?c34106e0b4e09414b63b2ea253ff83d6标签的使用方法总结
HTML中ul标签如何去掉点?HTML无序列表的样式实例解析
以上是html5draggable属性是如何做到页面拖动效果的?方法总结在这里!的详细内容。更多信息请关注PHP中文网其他相关文章!

HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

H5代码的最佳实践包括:1.使用正确的DOCTYPE声明和字符编码;2.采用语义化标签;3.减少HTTP请求;4.使用异步加载;5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5不仅仅是HTML5的简称,它代表了一个更广泛的现代网页开发技术生态:1.H5包括HTML5、CSS3、JavaScript及相关API和技术;2.它提供更丰富、互动、流畅的用户体验,能在多设备上无缝运行;3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5与HTML5指的是同一个东西,即HTML5。HTML5是HTML的第五个版本,带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能,提升了网页的表现力和交互性。

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

禅工作室 13.0.1
功能强大的PHP集成开发环境

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver CS6
视觉化网页开发工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境