通过 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
- 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模块暴露出来
- 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({
- 76position: 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;
- 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
- })]
- };
来源: http://www.cnblogs.com/QxQstar/p/6008376.html