搜索
首页web前端H5教程html5draggable属性是如何做到页面拖动效果的?方法总结在这里!

本篇文章主要为大家讲述的技术关于draggable属性实现页面拖动的效果,往下读下去,一步步的你会发现这个其实也不是很难,现在让我们一起来看这篇文章吧

本篇文章就是介绍Draggable(拖动)即实现页面元素的拖动效果的,所以,一步一步的来。

一、加载方式(首先是加载方式)

1.css样式加载:

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    内容部分
</div>

使用css样式加载Draggable,方便快捷,但是不利于管理,所以我们有课第二种加载方式,使用Jquery方式加载,一般我们都会使用Jquery的方式进行加载。

2.Jquery方式加载:

//不加属性
$(&#39;#box&#39;).draggable();
//JS部分
$(&#39;#box&#39;).draggable({
    revert : true,        //拖动后是否回到起始位置,boolean类型
    cursor : &#39;text&#39;,       //鼠标拖拽样式,十字,文本等
    handle : &#39;#pox&#39;,       //句柄,设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : &#39;v&#39;,          //设置拖拽方向,v:垂直拖拽,h:水平拖拽
    proxy: &#39;clone&#39;,        //设置代理元素,使用clone时为复制当前元素
    deltaX : 10,         //被拖拽元素左上角距离当前光标的X轴方向的距离
    deltaY : 10,         //被拖拽元素左上角距离当前光标的Y轴方向的距离  
    proxy: function(source){    //自定义代理元素
    var p = $(&#39;<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>&#39;);
    p.html($(source).html()).appendTo(&#39;body&#39;);
    return p;
    },
});
//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
    内容部分
</div>

二、事件(第二是事件)

1.onBeforeDrag 拖动前发生

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
        alert(&#39;拖动之前触发!&#39;);
        //return false;
    }
});

在拖动前发生,既当鼠标点击元素时发生,当返回false时将无法拖拽,我们不会让它直接返回false,因为这样没有任何意义,在使用时应该有充足的逻辑判断。

2.onStartDrag 拖动开始时发生

$(&#39;#box&#39;).draggable({
    onStartDrag : function (e) {
        alert(&#39;拖动开始时触发!&#39;);
        //return false;
    }
});

在鼠标点击后拖动的一瞬间执行,执行时间在onBeforeDrag之后。

3.onDrag拖拽过程中执行

$(&#39;#box&#39;).draggable({
    onDrag : function (e) {
        alert(&#39;拖动过程中触发!&#39;);
    }
});
在拖

动的过程中执行,当鼠标一移动就会执行,当不能拖动时返回false

4.onStopDrag 拖动停止后发生

$(&#39;#box&#39;).draggable({
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发!&#39;);
    }
});

在拖动结束后触发,即松开鼠标时执行,无返回值。

5.以上事件可组合使用,执行顺序为onBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
         alert(&#39;拖动之前触发!&#39;);
        //return false;
    },
    onStartDrag : function (e) {
       alert(&#39;拖动时触发!&#39;);
    },
    onDrag : function (e) {
        alert(&#39;拖动过程中触发!&#39;);
    },
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发!&#39;);
},});

三、方法(第三是方法)

方法名:说明

  • option :返回属性对象

  • proxy :如果代理属性被设置则返回该拖动代理元素

  • enabl :允许拖

  • disable :禁止拖动

//返回属性对象
console.log($(&#39;#box&#39;).draggable(&#39;options&#39;));
//返回代理元素
onStartDrag : function (e) {
console.log($(&#39;#box&#39;).draggable(&#39;proxy&#39;));
},
//禁止拖动
$(&#39;#box&#39;).draggable(&#39;disable&#39;);
//允许拖放
$(&#39;#box&#39;).draggable(&#39;enable&#39;);

四、设置默认属性(这是最后一个设置)

在一次设置后当前页面所有拖拽都会共享这个属性,不用再去设置。

$(function(){
    $.fn.draggable.defaults.cursor = &#39;text&#39;;
});

以上就是这篇关于draggable属性的页面拖动方面的全部内容了(想学更多就来PHP中文网),有问题的可以在下方提问。

【小编推荐】

html中的ol标签如何去掉标号呢?c34106e0b4e09414b63b2ea253ff83d6标签的使用方法总结

HTML中ul标签如何去掉点?HTML无序列表的样式实例解析

以上是html5draggable属性是如何做到页面拖动效果的?方法总结在这里!的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
解构H5代码:标签,元素和属性解构H5代码:标签,元素和属性Apr 18, 2025 am 12:06 AM

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

了解H5代码:HTML5的基本原理了解H5代码:HTML5的基本原理Apr 17, 2025 am 12:08 AM

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

H5代码:Web开发人员的最佳实践H5代码:Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

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

H5:网络标准和技术的发展H5:网络标准和技术的发展Apr 15, 2025 am 12:12 AM

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

H5是HTML5的速记吗?探索细节H5是HTML5的速记吗?探索细节Apr 14, 2025 am 12:05 AM

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

H5和HTML5:网络开发中常用的术语H5和HTML5:网络开发中常用的术语Apr 13, 2025 am 12:01 AM

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

H5指的是什么?探索上下文H5指的是什么?探索上下文Apr 12, 2025 am 12:03 AM

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

H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

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

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

禅工作室 13.0.1

禅工作室 13.0.1

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

SecLists

SecLists

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

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