JavaScript实战篇 - 拖拽功能

2021/7/8 14:06:02

编程Tag： javascript 拖拽 var window self point now old 实战篇

本文主要是介绍JavaScript实战篇 - 拖拽功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.你需要准备?

JavaScript
HTML5
CSS

二.效果预览

在这里插入图片描述

三.代码之风

3.1 HTML

<%--
  Created by IntelliJ IDEA.
  User: milogenius
  Date: 2019/10/30
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<%--页面浮标--%>
<div style="position: fixed;top: 43%;right: 0;z-index: 9;width: 69px;" id="rule">
    <a id="tz" style="display: block" href="https://blog.csdn.net/milogenius"><img style="width: 69px;" src="../images/rockets.jpg" alt=""></a>
</div>
<script src="../js/drag.js"></script>test
<script type="text/javascript" >
    //rule为div的id属性
    new drag({el:'rule'});
</script>

</body>
</html>

3.2 JS


function drag(){
    this.obj = arguments[0];
    this.el = document.getElementById(this.obj.el);
    this.l = 0, this.t = 0, this.old_l = 0, this.old_t = 0, this.point_l = 0, this.point_t = 0;
    this.index = 0;
    this.init();
}
drag.prototype = {
    constructor: "drag",
    init: function(){
        this.EventHandler();
    },
    EventHandler: function(){
        var self = this;
        self.el.addEventListener("touchstart", self.clickDown.bind(this), false);
        self.el.addEventListener("touchmove", self.clickMove.bind(this), false);
        document.addEventListener("touchend", self.clickUp.bind(this), false);
    },
    clickDown: function(){
        var self = this;
        document.addEventListener("touchmove", self.htmlScroll, { passive: false });
        document.querySelector("body").style.overflow ="hidden";
        var point = event.touches[0];

        self.old_l = point.clientX;
        self.old_t = point.clientY;
        self.scroll();
        self.point_l = self.old_l - self.scroll().left;
        self.point_t = self.old_t - self.scroll().top;
    },
    clickMove: function(){
        var self = this;
        var point = event.touches[0];
        self.l = point.clientX;
        self.t = point.clientY;

        var now_l = self.l - self.point_l;
        var now_t = self.t - self.point_t;
        if(now_l < 0){
            now_l = 0;
         }
         console.log(window.screen.availWidth - self.getStyle().width.split("p")[0])
        if(now_l > window.screen.availWidth - self.getStyle().width.split("p")[0]){
            now_l = window.screen.availWidth - self.getStyle().width.split("p")[0]
        }
        if(now_t > window.screen.availHeight - self.getStyle().height.split("p")[0]-80){
            now_t = window.screen.availHeight - self.getStyle().height.split("p")[0]-80
        }
        // document.getElementById("alert").innerHTML = now_t+"---"+ window.screen.availHeight +"----"+ self.getStyle().height.split("p")[0];
        if(now_t <= 0){
            now_t = 0;
        }
        self.el.style.left = now_l+"px";
        self.el.style.top = now_t+"px";
    },
    clickUp: function(){
        var self = this;
        document.removeEventListener("touchmove", self.htmlScroll, { passive: false });
        document.querySelector("body").style.overflow ="initial";
    },
    scroll: function(){
        var json = {};
        json.left = this.el.offsetLeft;
        json.top = this.el.offsetTop;
        return json;
    },
    getStyle: function (){
		if(window.currentStyle){
			style=window.currentStyle(this.el,null);
		}else{
			style=window.getComputedStyle(this.el,null)
        }
        return style;
    },
    htmlScroll: function(event){
        if (event.cancelable) {
            if (!event.defaultPrevented) {
                event.preventDefault();
            }
        }
    }
}

3.3 JAVA

/**
 * @author milogenius
 * @date 2019-11-22 09:00
 */
@Controller
@RequestMapping("/test")
public class TestController {

    @RequestMapping("toIndexPage.html")
    public String toIndexPage(){
        return "/test";
    }
}

这篇关于JavaScript实战篇 - 拖拽功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！