移動端拖拽（模塊化開發，觸摸事件，webpack）

来源:http://www.cnblogs.com/QxQstar/archive/2016/10/28/6008376.html
-Advertisement-
Play Games

通過jquery可以很容易實現CP端的拖拽。但是在移動端卻不好用了。於是我自己寫了一個在移動端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。 這個demo實現的功能是：可以拖拽的元素（在這裡是圖片）位於列表中，這些元素可以被拖到指定區域，到達 ...


通過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 = $('<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
        })
    ]
};

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自定義右鍵菜單
    自定義右鍵菜單 技術一般水平有限，有什麼錯的地方，望大家指正。 自定義右鍵菜單，對於一些ERP系統，功能操作比較多，所以我們通常把常用的幾個功能放在自定義的右鍵菜單里方便用戶使用。 實現自定義菜單很簡單，首先我們要屏蔽原始的右鍵菜單，自定義菜單出現在滑鼠的位置，點擊隱藏自定義菜單，過程就是這樣的。 ...
  • javascript常用代碼(不完整版)
    Javascript嵌入式 <script typt:javascript>代碼</script> 註釋 //或者/*內容*/ 變數名賦值 Var 變數名 = 值 輸出方式 Document.write(變數名) window.alert(變數名) 算數運算符 a++;a-- 賦值運算符 字元串運算 ...
  • javascript對象
    1、什麼是表單對象 表單（<form>）是Web頁面中的基本元素。表單對象最主要的功能就是能夠直接訪問頁面中的表單。利用表單對象，可以實現與用戶的交互；不需要伺服器的介入，就可以實現動態改變Web頁面的行為。對於Web頁面表單，通常使用document對象的forms數組可以很方便地訪問不同的表單。 ...
  • angular中的$q.defer()服務非同步處理
    jquery和angular都有defer服務，我暫以angular為例談談我的理解，最後並附上jquery的阮一峰總結的defer。 以我目前項目的部分代碼為例說明為什麼要用deferred。 就這段代碼，我想要在位置二處使用base64，然後結果呢？ 兩處位置都列印了，位置一得到base64，o ...
  • 水平居中
    方案一 位置 屬性名 值 意義 父div text-align center 讓子元素居中 子div display inline-block 可以將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。inline-block的寬度是其中文字的寬度。 子div text-align left 讓子元素... ...
  • 如何創建對象
    1.使用Object創建對象 2.工廠模式 3.構造函數模式 4.原型模式 我們創建的每個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含可以有特定類型的所有實例共用的屬性和方法。 原型和實例通過prototype和constructor屬性相互關聯 ...
  • html5 手風琴菜單
    因為項目需要，現在需要做個手風琴菜單，於是自己就瞎整了一下，所用只是less.js javascript jquery效果如圖： 具體代碼如下： <!DOCTYPE html><html> <head> <title></title> <style type="text/less"> .list{ ...
  • css實現在圖片上顯示文字
    一. 準備工作 1. 點擊此下載 相關的文件 二. 瀏覽器中運行 play-img.html 文件，即可顯示效果 三. 效果圖 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類