vue+mousedown实现全屏拖动，全屏投掷

admin 2023-01-30 15:51:01

篇首语：本文由小编为大家整理，主要介绍了vue+mousedown实现全屏拖动，全屏投掷相关的知识，希望对你有一定的参考价值。

1、html

DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>鼠标滑动title>    <link rel="stylesheet" href="./index.css">head><body><p id="app">        <p class="ctn ctn1">            <p class="sub sub1" v-for="(site, index) in list1">                <p class="dragCtn fixed" @mousedown="mousedown(site, $event)"                    @mousemove.prevent="mousemove(site, $event)" @mouseup="mouseup(site, $event)">                    {{ site.name }}                p>            p>        p>        <p class="ctn ctn2">            <p class="sub sub2" v-for="(site, index) in list2">                <p class="dragCtn">                    {{ index }} : {{ site.name }}                p>            p>        p>    p>    <script src="/node_modules/vue/dist/vue.js">script>    <script src="./index.js">script>body>html>

2、javascript

NS.JszHUoER。CoM

new Vue({    el: "#app",    data: {        list1: [{ name: "拖动我", index: 0 }],        list2: [{ name: "a", index: 0 }, { name: "b", index: 1 }, { name: "c", index: 2 }, { name: "d", index: 3 }],        vm: "",        sb_bkx: 0,        sb_bky: 0,        is_moving: false    },    methods: {        mousedown: function (site, event) {            var startx = event.x;            var starty = event.y;            this.sb_bkx = startx - event.target.offsetLeft;            this.sb_bky = starty - event.target.offsetTop;            this.is_moving = true;        },        mousemove: function (site, event) {            var endx = event.x - this.sb_bkx;            var endy = event.y - this.sb_bky;            var _this = this            if (this.is_moving) {                event.target.style.left = endx + "px";                event.target.style.top = endy + "px";            }        },        mouseup: function (e) {            this.is_moving = false;        }    }});

3、css

.ctn {    line-height: 50px;    cursor: pointer;    font-size: 20px;    text-align: center;    float: left;}.sub:hover {    background: #e6dcdc;    color: white;    width: 100px;}.ctn1 {    border: 1px solid green;    width: 100px;}.ctn2 {    border: 1px solid black;    width: 100px;    margin-left: 50px;}.fixed {    width: 100px;    height: 100px;    position: fixed;    background: red;    left: 10px;    top: 10px;    cursor: move;}