使用jQuery实现元素拖动的要点

小咪咪 2022-08-09 15:55 280阅读 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