zoukankan      html  css  js  c++  java
  • Vue-实现简单拖拽(自定义属性)

    <!DOCTYPE html>
    <html lang="en">
    <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">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>拖拽</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #box{
    background: red;
    100px;
    height: 100px;
    position: absolute;

    }
    </style>

    </head>
    <body>
    <div id="app">
    <div id="box" v-drag.l.t="flag"></div>
    </div>
    <script>
    Vue.directive("drag",(el,{modifiers,value})=>{
    let{l,t}=modifiers;


    el.addEventListener("mousedown",handleDownCb)

    let disX,disY;
    function handleDownCb(e){
    disX=e.offsetX;
    disY=e.offsetY;
    document.addEventListener("mousemove",handleMoveCb);
    document.addEventListener("mouseup",handleUpCb);
    }

    function handleMoveCb(e){
    let x=e.clientX-disX;
    let y=e.clientY-disY;
    if((l&&t) && value){
    el.style.left=x+"px";
    el.style.top=y+"px";
    return;
    }

    if(l&&value){
    el.style.left=x+"px";
    return;
    }
    if(t&&value){
    el.style.top=y+"px";
    return;
    }
    }

    function handleUpCb(){
    document.removeEventListener("mousemove",handleMoveCb);
    document.removeEventListener("mouseup",handleUpCb);
    }

    })
    let vm=new Vue({
    el:"#app",
    data:{
    flag:true
    }
    })
    </script>
    </body>

  • 相关阅读:
    sql笔记
    [ACTF2020 新生赛]Include
    [极客大挑战 2019]Http
    [极客大挑战 2019]Knife
    [极客大挑战 2019]Secret File
    [HCTF 2018]admin
    [极客大挑战 2019]Havefun
    [RoarCTF 2019]Easy Calc
    ascll码转化
    《逆向工程核心原理》笔记第一章到第十一章
  • 原文地址:https://www.cnblogs.com/Bree/p/12009020.html
Copyright © 2011-2022 走看看