jQuery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)攻略

背景介绍

在网页制作中，拖拽效果其实是一种很常见的交互方式，比如拖拽图片上传等，使用jQuery可以轻松实现这种效果。然而，在实际开发中我们需要考虑的是兼容性问题，本攻略将为大家介绍如何使用jQuery实现简单的拖拽效果，并兼容所有主流浏览器。

实现步骤

HTML结构

首先，我们需要在HTML代码中添加拖拽元素的结构：

<div class="drag">拖拽我</div>

CSS样式

然后，为这个拖拽元素添加一些CSS样式（根据自己的需要进行样式调整）：

.drag{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #000;
    text-align: center;
    line-height: 100px;
    cursor: move;
}

JavaScript代码

接下来，我们使用jQuery编写JavaScript代码实现拖拽效果。

初始状态

首先，我们需要得到拖拽元素的位置，使用jQuery的offset()方法可以方便地得到元素的当前位置：

var $drag = $('.drag'), //获取拖拽元素
    disX, //定义水平方向的偏移量
    disY; //定义垂直方向的偏移量

$drag.on('mousedown', function(e) { //给拖拽元素添加鼠标事件
    var offset = $drag.offset(); //获取拖拽元素的当前位置
    disX = e.pageX - offset.left; //计算水平方向的偏移量
    disY = e.pageY - offset.top; //计算垂直方向的偏移量
});

拖拽状态

然后，我们需要实现鼠标按下并拖拽的效果。使用jQuery的mousemove()方法来实现：

$(document).on('mousemove', function(e) { //给document添加拖拽事件
    if ($drag.is(':animated')) { //判断是否已经存在动画效果
        $drag.stop(true, true); //停止动画效果
    }
    var x = e.pageX - disX, //计算拖拽后水平方向的位置
        y = e.pageY - disY; //计算拖拽后垂直方向的位置
    $drag.css({'left': x, 'top': y}); //设置拖拽元素的位置
});

松开状态

最后，我们需要实现鼠标松开的效果。使用jQuery的mouseup()方法来实现：

$drag.on('mouseup', function() { //给拖拽元素添加鼠标事件
    $(document).off('mousemove'); //取消拖拽事件
    $drag.animate({'left': 0, 'top': 0}, 300); //添加动画效果，将元素移回初始位置
});

参数说明

上述代码中使用到了以下参数：

offset(): 获取元素的当前位置；
e.pageX: 获取鼠标相对于文档左侧边缘的水平坐标；
e.pageY: 获取鼠标相对于文档顶部边缘的垂直坐标；
css(): 设置元素的CSS样式；
animate(): 为元素添加动画效果；
stop(): 停止动画效果。

示例说明

下面有两个有关拖拽效果的示例说明。

示例一

需求

制作一个简易的卡片拖拽效果，实现卡片在容器内可以自由拖拽。

实现

HTML结构：

<div id="container">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
</div>

CSS样式：

#container{
    width: 500px;
    height: 300px;
    background-color: #eee;
    padding: 10px;
    overflow: auto;
}
.card{
    width: 80px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #000;
    text-align: center;
    line-height: 100px;
    cursor: move;
    margin: 10px;
    float: left;
}

JavaScript代码：

var $container = $('#container'); //获取容器

$('.card').on('mousedown', function(e) { //给卡片添加鼠标事件
    var $this = $(this),
        offset = $this.offset(),
        disX = e.pageX - offset.left,
        disY = e.pageY - offset.top;
    $container.on('mousemove', function(e) { //给容器添加拖拽事件
        var x = e.pageX - disX,
            y = e.pageY - disY;
        $this.css({'left': x, 'top': y}); //设置拖拽元素的位置
    });
    $(document).on('mouseup', function() { //给document添加鼠标事件
        $container.off('mousemove'); //取消拖拽事件
    });
});

示例二

需求

制作一个简易的图片上传效果，实现图片可以拖拽上传。

实现