文件拖动封装

女爷i 2022-12-09 02:37 125阅读 0赞

## 文件拖动封装 ##

// 拖动封装
    (function () { 
        var domList = document.querySelectorAll("[drag-move]");
        function domMouseMove(event) { 
            event = event || window.event;
            var cssObj = window.getComputedStyle(this);
    
            this.style.left = parseFloat(cssObj.left) + event.clientX - this.dataset.startX + "px";
            this.style.top = parseFloat(cssObj.top) + event.clientY - this.dataset.startY + "px";
    
            //上面的坐标已经赋值完成后
            this.dataset.startX = event.clientX;
            this.dataset.startY = event.clientY;
        }
        domList.forEach(function (item) { 
            item.addEventListener("mousedown", function (event) { 
                event = event || window.event;
                if (event.button == 0) { 
                    //先记录鼠标的clientX与clientY
                    this.dataset.startX = event.clientX;
                    this.dataset.startY = event.clientY;
                    this.addEventListener("mousemove", domMouseMove);
                }
            });
    
            item.addEventListener("mouseup", function (event) { 
                this.removeEventListener("mousemove", domMouseMove);
            });
    
            item.addEventListener("mouseleave", function (event) { 
                this.removeEventListener("mousemove", domMouseMove);
            })
        });
    })();

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用JavaScriptJ封装拖动验证滑块？本文教你

前言星期六闲着没事，就想着写写原生js玩玩，在网上看了几个效果后决定做这个效果，并且使用了prototype和eventEmitter封装成了库。最终效果

谁践踏了优雅/ 2023年02月16日 14:30/ 0 赞/ 45 阅读

相关文件拖动封装

文件拖动封装 // 拖动封装 (function () { var domList = document.querySelectorAl

女爷i/ 2022年12月09日 02:37/ 0 赞/ 126 阅读

相关 Qt笔记-拖动文件到QWidget（获取拖动文件路径）

这里主要重写下面3种方法即可： void dropEvent(QDropEvent event) Q_DECL_OVERRIDE; void drag

系统管理员/ 2022年11月20日 09:32/ 0 赞/ 392 阅读

相关 java 文件封装_Java字节流文件封装

/\\\ 字节流封装方法\/ importjava.io.FileInputStream;importjava.io.FileNotFoundException;import

本是古典何须时尚/ 2022年11月03日 10:47/ 0 赞/ 48 阅读

相关实现拖动文件到文本框，自动读出文件内容

//实现拖动文件到文本框，自动读出文件内容 //前端XAML代码： <TextBox AcceptsReturn="True" AcceptsTab="True" AllowD

r囧r小猫/ 2022年07月15日 00:13/ 0 赞/ 201 阅读

相关实现拖动文件到文本框，自动读出文件内容

//实现拖动文件到文本框，自动读出文件内容 //前端XAML代码： <TextBox AcceptsReturn="True" AcceptsTab="True" AllowD

川长思鸟来/ 2022年07月15日 00:13/ 0 赞/ 249 阅读

相关 JavaScript实现拖动滑块验证（方法已封装）

前提之前写了一篇博文，题目是[《JavaScript实现拖动滑块验证》][JavaScript]，里面都是用最简单的方式实现的。后来，群里大神推荐了一款`unlo

叁歲伎倆/ 2022年05月11日 20:16/ 0 赞/ 404 阅读

相关 index封装文件

var _gjdata,laydates,selectM,treeSelect,alarmTime,layer,gjFlag=true; var gjtime

痛定思痛。/ 2022年04月01日 04:22/ 0 赞/ 191 阅读

相关 basefun封装文件

var judge=false; function ajax(obj){//ajax请求 $.ajax({ url:obj.url,//请

迷南。/ 2022年04月01日 04:21/ 0 赞/ 153 阅读

相关文件流下载文件封装

import { exportMethod } from '@/utils/helper/exportExcel' methods: {

水深无声/ 2021年09月24日 21:26/ 0 赞/ 298 阅读