移动端拖拽(模块化开发,触摸事件,webpack)

通过jquery可以很容易实现CP端的拖拽。但是在移动端却不好用了。于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend)。

这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台。

在这个demo中一个用三个模块,分别为ajax模块,drag模块,position模块。ajax模块用于实现ajax请求(所以的图片资源是通过ajax请求得到的),drag模块用于实现元素拖拽,position模块用于实现元素位置的操作(如位置初始化,复原,移除)。demo的入口文件是indx.js和前面三个模块文件保存在同一个文件夹中。编码完成后通过webpack打包。开发代码位于app文件夹中,打包后的代码位于build文件夹中。

一.触摸事件的介绍

触摸事件有三个,分别是touchstart,touchmove和touchend。touchstart事件在手指触摸屏幕时触发。touchmove当手指在屏幕上滑动时连续触发。在这个事件发生期间取消它的默认,可以组织页面滚动。touchend在手指从屏幕上离开时触发。这三个触摸事件的事件对象除了提供了鼠标事件的常见属性,还包含了下面三个属性:

    touches:表示当前跟踪的触摸操作的touch对象的数组。

  targetTouches:特定于事件目标的Touch对象的数组。

  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

在这个案例中需要得到触摸点相对视口的位置,我使用的是event.targetTouches[0].clientX和event.targetTouches[0].clientY

二.ajax模块的代码

 1 var $ = require(‘jquery‘);
 2
 3 var ajax = {
 4     //得到可拖拽图片的初始列表
 5     getInitImg:function(parent){
 6         var num  = 50;
 7         $.ajax({
 8             type:"GET",
 9             async:false,//这里使用同步加载,因为要让图片加载完成后才能做其他操作
10             url:‘/Home/picwall/index‘,
11             success:function(result){
12                 if(result.status == 1) {
13                     $.each(result.data, function (index,item) {
14                         var src = item.pic_src;
15                         var width = parseInt(item.width);
16                         var height = parseInt(item.height);
17                         var ratio = num / height;
18                         var img = $(‘

‘).attr("src",src).height(num).width(parseInt(width * ratio));
19                         parent.append(img);
20                     });
21                 }
22             },
23             dataType:‘json‘
24         });
25     }
26 };
27
28 module.exports  = ajax;//将ajax模块暴露出来

三.position模块的代码

  1 var $ = require(‘jquery‘);
  2
  3 var position = {
  4     //初始化位置,gap是一个表示元素间距的对象
  5     init:function(parent,gap){
  6         var dragElem = parent.children();
  7
  8         //确保父元素是相对定位
  9         if(parent.css(‘position‘) !== "relative"){
 10             parent.css(‘position‘,‘relative‘);
 11         }
 12         parent.css({
 13             ‘width‘:"100%",
 14             ‘z-index‘:‘10‘
 15         });
 16         //当前列表内容的宽度
 17         var ListWidth = 0;
 18
 19         //位于第几列
 20         var j = 0;
 21         dragElem.each(function(index,elem){
 22             var curEle = $(elem);
 23
 24             //设置元素的初始位置
 25             curEle.css({
 26                 position:"absolute",
 27                 top:gap.Y,
 28                 left:ListWidth + gap.X
 29             });
 30
 31                 //为每个元素添加一个唯一的标识,在恢复初始位置时有用
 32             curEle.attr(‘index‘,index);
 33
 34             //将元素的初始位置保存起来
 35             position.coord.push({
 36                 X:ListWidth + gap.X,
 37                 Y:gap.Y
 38             });
 39             j++;
 40
 41             //设置父元素的高度
 42             parent.height( parseInt(curEle.css(‘top‘)) + curEle.height() + gap.Y);
 43
 44             ListWidth = curEle.offset().left + curEle.width();
 45         });
 46     },
 47     //将子元素插入到父元素中
 48     addTo:function(child,parent,target){
 49         //父元素在视口的坐标
 50         var parentPos = {
 51             X:parent.offset().left,
 52             Y:parent.offset().top
 53         };
 54
 55         //目标位置相对于视口的坐标
 56         var targetPos = {
 57             X:target.offset().left,
 58             Y:target.offset().top
 59         };
 60
 61         //确保父元素是相对定位
 62         if(parent.css(‘position‘) !== "relative"){
 63             parent.css({
 64                 ‘position‘:‘relative‘
 65             });
 66         }
 67
 68         parent.css({
 69             ‘z-index‘:‘12‘
 70         });
 71         //将子元素插入父元素中
 72         parent.append(child);
 73
 74         //确定子元素在父元素中的位置并且保证子元素的大小不变
 75         child.css({
 76        position:absolute,
 77             top:targetPos.Y - parentPos.Y,
 78             left:targetPos.X - parentPos.X,
 79             width:target.width(),
 80             height:target.height()
 81         });
 82
 83     },
 84     //将元素恢复到原来的位置
 85     restore:function(elem){
 86         //获得元素的标识
 87         var index = parseInt( elem.attr(‘index‘) );
 88         elem.css({
 89             top:position.coord[index].Y,
 90             left:position.coord[index].X
 91         });
 92
 93     },
 94     //拖拽元素的初始坐标
 95     coord:[],
 96     //判断元素A是否在元素B的范围内
 97     isRang:function(control,dragListPar,$target){
 98         var isSituate = undefined;
 99         if(control.offset().top > dragListPar.offset().top){
100             isSituate = $target.offset().top > control.offset().top
101                         && $target.offset().left > control.offset().left
102                         && ($target.offset().left + $target.width()) < (control.offset().left + control.width());
103         }else{
104             isSituate = ($target.offset().top + $target.height())<(control.offset().top + control.height())
105                         && $target.offset().top > control.offset().top
106                         && $target.offset().left > control.offset().left
107                         &&  ($target.offset().left + $target.width()) < (control.offset().left + control.width());
108         }
109         return isSituate;
110     }
111 };
112 module.exports = position;

四.drag模块的代码

  1 var $ = require(‘jquery‘);
  2 var position = require(‘./position.js‘);
  3
  4 var drag = {
  5     //拖拽元素的父元素的id
  6     dragParen:undefined,
  7     //操作台的id值
  8     control:undefined,
  9     //移动块相对视口的位置
 10     position:{
 11         X:undefined,
 12         Y:undefined
 13     },
 14     //触摸点相对视口的位置,在滑动过程中会不断更新
 15     touchPos:{
 16         X:undefined,
 17         Y:undefined
 18     },
 19     //开始触摸时触摸点相对视口的位置
 20     startTouchPos:{
 21         X:undefined,
 22         Y:undefined
 23     },
 24     //触摸点相对于移动块的位置
 25     touchOffsetPos:{
 26         X:undefined,
 27         Y:undefined
 28     },
 29     //获取拖拽元素父元素id和控制台的ID的值
 30     setID:function(dragList,control){
 31         this.dragParent = dragList;
 32         this.control = control;
 33     },
 34     touchStart:function(e){
 35         var target = e.target;
 36
 37         //阻止冒泡
 38         e.stopPropagation();
 39
 40         //阻止浏览器默认的缩放和滚动
 41         e.preventDefault();
 42
 43         var $target = $(target);
 44
 45         //手指刚触摸到屏幕上时,触摸点的位置
 46         drag.startTouchPos.X = e.targetTouches[0].clientX;
 47         drag.startTouchPos.Y = e.targetTouches[0].clientY;
 48
 49         //触摸元素相对视口的位置
 50         drag.position.X = $target.offset().left;
 51         drag.position.Y = $target.offset().top;
 52
 53         //触摸点相对于视口的位置,滑动过程中不断更新
 54         drag.touchPos.X = e.targetTouches[0].clientX;
 55         drag.touchPos.Y = e.targetTouches[0].clientY;
 56
 57         //触摸点相对于触摸元素的位置
 58         drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
 59         drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
 60
 61         //给目标元素绑定touchMove事件
 62         $target.unbind(‘touchmove‘).on(‘touchmove‘,drag.touchMove);
 63
 64     },
 65     touchMove:function(e){
 66
 67         var target = e.target;
 68
 69         //阻止冒泡
 70         e.stopPropagation();
 71
 72         //阻止浏览器默认的缩放和滚动
 73         e.preventDefault();
 74
 75         var $target = $(target);
 76
 77         //获得触摸点的位置
 78         drag.touchPos.X = e.targetTouches[0].clientX;
 79         drag.touchPos.Y = e.targetTouches[0].clientY;
 80
 81         //修改移动块的位置
 82         $target.offset({
 83             top: drag.touchPos.Y - drag.touchOffsetPos.Y,
 84             left: drag.touchPos.X - drag.touchOffsetPos.X
 85         });
 86
 87         //给移动元素绑定touchend事件
 88         $target.unbind(‘touchend‘).on(‘touchend‘,drag.touchEnd);
 89     },
 90     touchEnd:function(e) {
 91         var target = e.target;
 92
 93         //阻止冒泡
 94         e.stopPropagation();
 95
 96         //阻止浏览器默认的缩放和滚动
 97         e.preventDefault();
 98
 99         var $target = $(target);
100         var parent = $target.parent();
101
102         //得到控制台和拖动元素列表的父元素
103         var control = $("#" + drag.control);
104         var dragListPar = $(‘#‘ + drag.dragParent);
105
106         //拖动元素是否位于控制台
107         var sitControl = position.isRang(control, dragListPar, $target);
108
109         //拖动结束后,如果拖拽元素的父元素是拖拽列表
110         if (parent.attr(‘id‘) === drag.dragParent) {
111             //如果元素位于控制台
112             if (sitControl) {
113                 var dragChild = $target.clone();
114
115                 //为克隆出的元素绑定touchstart事件
116                 dragChild.unbind(‘touchstart‘).on(‘touchstart‘,drag.touchStart);
117
118                 //将克隆出的元素插入到控制台
119                 position.addTo(dragChild, control, $target);
120             }
121
122             //将原来的触摸元素恢复到初始位置
123             position.restore($target);
124         }
125
126         // 拖拽结束后,如果拖拽元素的父元素是控制台,并且元素拖出了控制台
127         if (parent.attr(‘id‘) === drag.control && !sitControl) {
128                 $target.remove();
129         }
130     }
131 };
132 module.exports = drag;

五.入口文件index.js的代码

require(‘../css/base.css‘);
require(‘../css/drag.css‘);
var $ = require(‘jquery‘);
var drag = require(‘./drag.js‘);
var position = require(‘./position.js‘);
var ajax = require(‘./ajax.js‘);

var dragList = $(‘#dragList‘);

//可拖拽元素的水平,竖直间距
var gap = {
    X:20,
    Y:10
};

//通过ajax获取可拖拽的元素的列表
ajax.getInitImg(dragList);

//初始化可拖拽元素的位置
position.init(dragList,gap);

//设置控制台的高度。控制台的高度为屏幕的高度减去拖拽列表的盖度
var control = $(‘#control‘);
control.height( $(window).height() - dragList.height() );

//给每个拖动元素绑定touchstart事件
var dragElem = dragList.children();
dragElem.each(function(index,elem){
    $(elem).unbind(‘touchstart‘).on(‘touchstart‘,drag.touchStart);
});

//拖拽元素的父元素的id值为dragList,操作台的id值为control
drag.setID(‘dragList‘,‘control‘);

六.webpack打包

上面用到了模块化编程的思想,将不同的功能实现写在了不同的模块中,需要用到什么功能就可以用require()去引入,但是浏览器并没有require方法的定义。所以上面的代码并不能直接在浏览器中运行,需要先打包。如果你对webpack还不熟悉你可以去查看这篇文章,webpack的配置文件如下:

var autoHtml = require(‘html-webpack-plugin‘);
var webpack = require(‘webpack‘);
var extractTextWebpack = require(‘extract-text-webpack-plugin‘);// 这个插件可以将css文件分离出来,为css文件位于单独的文件中
module.exports = {
    entry:{
        ‘index‘:‘./app/js/index.js‘,
        ‘jquery‘:[‘jquery‘]
    },
    output:{
        path:‘./build/‘,
        filename:‘js/[name].js‘
    },
    module:{
        loaders:[
            {
                test:/\.css/,
                loader:extractTextWebpack.extract(‘style‘,‘css‘)
            }
        ]
    },
    plugins:[
        new extractTextWebpack(‘css/[name].css‘,{
            allChunks:true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:‘jquery‘,
            filename:‘js/jquery.js‘
        }),
        new autoHtml({
            title:"拖拽",
            filename:"drag.html",
            template:‘./app/darg.html‘,
            inject:true
        })
    ]
};

分类: javascript demo

时间: 2024-12-10 17:14:09

移动端拖拽(模块化开发,触摸事件,webpack)的相关文章

pc端拖拽事件

<html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #box{ width: 208px; height: 208px; background: url(girl.gif) no-repeat; position: absolute; } </style></head>&

pc端移动端拖拽实现

#div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="div1"> </div> js 1 window.onload = function () { 2 var oDiv = document.getElementById('div1'); 3 //pc端 4 oDiv.onmousedown = function (ev) { 5 v

html5移动端拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0" name="viewport"/> <title>论坛列表</title> <link href="

关于移动端拖拽

移动端碰撞检测 function drag(obj1,obj2,success){ obj1.addEventListener("touchstart", function(e) { var touches = e.touches[0]; window.disX= touches.clientX - obj1.offsetLeft; window.disX= touches.clientY - obj1.offsetTop; //阻止页面的滑动默认事件 document.addEven

移动端拖拽

var move=document.getElementsByClassName("page1_2")[0]; var startX=0; var startY=0; var x=0; var y=0; var off = 0; move.addEventListener("touchstart", function (e) { var e = e || event; off=1; startX = this.offsetLeft; startY = this.of

妙味课堂实战功能开发视频教程 3D翻转焦点图/瀑布流/拖拽购物车/模块化开发等实战教程

<HTML5梦工厂 - 码农俱乐部视频>├<第八期码农俱乐部-技术之夜-3D翻转焦点图>│  ├1-码农俱乐部技术之夜-3D翻转焦点图_.mkv│  ├2-码农俱乐部技术之夜-3D翻转焦点图_.mkv│  ├3-码农俱乐部技术之夜-3D翻转焦点图_.mkv│  └lesson8.zip├<第二期码农俱乐部-技术之夜-瀑布流效果>│  ├1-码农俱乐部技术之夜-瀑布流效果1(原理介绍)_.mkv│  ├2-码农俱乐部技术之夜-瀑布流效果2(布局和数据的获取)_.mkv│ 

iOS开发拓展篇—xib中关于拖拽手势的潜在错误

iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行程序,程序直接崩溃,报错如下: 说明:手势不会有superView方法,superView是UIView的方法,说明我们错误的把手势对象当成是UIView来用了. 调试查看出现问题的原因: 出现问题的原因: 说明:通过lastObject取出来的对象是手势,而不是xib,因此出现上面的错误. 把la

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况

面向对象实战之封装拖拽对象

面向对象实战之封装拖拽对象 利用前面几章的所涉及到的知识,封装一个拖拽对象.为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖拽对象. 本文的例子会放置于codepen.io中,供大家在阅读时直接查看.如果对于codepen不了解的同学,可以花点时间稍微了解一下. 拖拽的实现过程会涉及到非常多的实用小知识,因此为了巩固我自己的知识积累,也为了大家能够学到更多的知识,我会尽量详