使用jQuery实现元素拖动的要点
来源:互联网 发布:高中数学 算法大纲 编辑:程序博客网 时间:2024/05/16 08:47
jQuery UI可以很简单的实现元素的拖动,有时候,我们不能使用jQuery UI,或者不想因为拖动就引入一个UI库,就可以自己实现元素的拖动,下面笔者把自己使用jQuery + TouchSwipe组件实现拖动的关键点做简要说明。
HTML拖动的关键点就是修改元素的位置,通过相对偏移来实现,而这个偏移可以通过jQuery的offset方法来实现。
拖动还需要考虑鼠标的移动事件,笔者采用TouchSwipe的swipeStatus事件来实现(手机设备友好的触摸库)。
开始拖动时记录开始位置:
zoom = $("body").css("zoom");z_idx = $(event.target).css('z-index'),drg_h = $(event.target).outerHeight(),drg_w = $(event.target).outerWidth(),pos_y = $(event.target).offset().top + drg_h - event.pageY/zoom,pos_x = $(event.target).offset().left + drg_w - event.pageX/zoom;drgObj = event.target;hitObj = null;$(drgObj).css('z-index', 1000).addClass('dragging');
这里需要注意几点:
- 需要取得当前页面zoom的比率,不然会出现移动错位的现象(跟不上拖动的节奏),如果没有缩放可以设置为1或者不需要改参数。
- 备份当前元素的z-index,用于还原
- 取得要拖动组件的大小
- 以当前点击位置记录组件的开始偏移(相对于页面的)
- 保存拖动对象的索引(拖动过程中需要使用,后面详细解释)
- 把元素置顶,添加拖动样式(比如加边框,3d效果等)
拖动过程中就是修改组件的偏移位置,需要注意的是,拖动过程中,鼠标与拖动的组件会有速度上的差别,尤其是拖动速度比较快时,这个时候,前面保存的拖动对象就可以起作用了。
if (drgObj == null) return;$(drgObj).offset({ top:event.pageY/zoom + pos_y - drg_h, left:event.pageX/zoom + pos_x - drg_w});
在移动事件中,我们修改拖动对象的偏移位置,达到拖动的效果。
如果拖动的过程中需要检测是否命中目标对象(拖动的目的),我们需要检查当前位置是否落在目标对象的范围内,使用如下代码:
function hitObject(x, y, dest){ var dl = $(dest).offset().left; dt = $(dest).offset().top; var dh = $(dest).outerHeight(), dw = $(dest).outerWidth(); if (dl-10 < x && x < dl+dw+10 && dt-10 < y && y < dt+dh+10){ return true; } return false;}
hitObject需要三个参数,x,y为页面坐标,dest为检查的目标组件,比如,”.quan1”就是具有quan1的类对象,最好使用id访问,确保对象唯一:
if (hitObject(event.pageX/zoom, event.pageY/zoom, ".quan1")) { //...}
鼠标松开(离开触摸屏)时结束拖动,结束拖动一般需要修改目标对象的样式,表明选中,也可以定位拖动对象,或者把拖动对象还原到原来的位置。还原位置如果是通过修改偏移总有点问题,所以,笔者的做法就是取消拖动添加的样式:
$("#answer1, #answer2, #answer3").css("top", "").css("left", "").css("position", "");
通过清楚top,left和position样式就可以了,由于jQuery添加的样式是直接添加到元素上面的,取消掉后,不影响原来通过class添加的样式。
以上就是通过jQuery实现元素拖动的过程和注意事项,希望读者可以收获自己的灵感。本文使用TouchSwipe组件的swipeStatus中phase参数检查拖动的状态的:
swipeStatus : function(event, phase, direction, distance, duration, fingerCount, fingerData ){
if (phase == "start"){
}else if (phase == "move"){
}else if (phase == "end"){
}
},
- 使用jQuery实现元素拖动的要点
- 使用jquery实现简单的拖动效果
- JQuery实现鼠标拖动元素移动位置
- jquery实现div的拖动
- HTML5实现网页元素的拖动操作
- javascript 实现元素拖动的源代码
- JS 实现div元素的拖动
- javscript实现元素拖动
- jquery对元素拖动排序
- jQuery实现可以拖动的div
- jquery实现可拖动的div
- Jquery实现鼠标可拖动的进度条
- JQUERY实现拖动层
- Jquery实现拖动条
- jquery实现鼠标拖动
- jquery实现拖动排序
- Jquery实现拖动
- jquery拖动简单实现
- 欢迎使用CSDN-markdown编辑器
- session的使用
- 仅通过崩溃地址找出源代码的出错行
- rotue路由的配置
- BFS和DFS优先搜索算法
- 使用jQuery实现元素拖动的要点
- linux 安装rz sz方法
- 404错误的配置
- OC学习 第四章 复合
- jade嵌套的使用
- 如何让Qt 的程序等待一段时间
- ajax登录
- STM32(Cortex-M3)中的优先级概念-20151029
- FileStorage_SharePreference