使用jQuery实现元素拖动的要点 小咪咪 2022-08-09 15:55 222阅读 0赞 jQuery UI可以很简单的实现元素的拖动,有时候,我们不能使用jQuery UI,或者不想因为拖动就引入一个UI库,就可以自己实现元素的拖动,下面笔者把自己使用jQuery + TouchSwipe组件实现拖动的关键点做简要说明。 HTML拖动的关键点就是修改元素的位置,通过相对偏移来实现,而这个偏移可以通过[jQuery的offset方法][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_offset]: http://www.w3school.com.cn/jquery/css_offset.asp [TouchSwipe]: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin [swipeStatus]: http://labs.rampinteractive.co.uk/touchSwipe/docs/symbols/%24.fn.swipe.html#event:swipeStatus
还没有评论,来说两句吧...