vue 写简单拖拽

作者: lucky_yao | 来源:发表于2020-10-13 07:40 被阅读0次

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>自定义指令</title>

    <style>

      .box {

        width: 100px;

        height: 100px;

        position: absolute;

        background: greenyellow;

      }

    </style>

  </head>

  <body>

    <div id="app">

      <div class="box" v-focus></div>

    </div>

  </body>

  <script src="js/vue.js"></script>

  <script>

    Vue.directive("focus", function (el) {

      el.onmousedown = function (ev) {

        var sX = ev.clientX - el.offsetLeft;

        var sY = ev.clientY - el.offsetTop;

        document.onmousemove = function (ev) {

          var eX = ev.clientX - sX;

          var eY = ev.clientY - sY;

          if (eX < 0) {

            eX = 0;

          }

          if (eY < 0) {

            eY = 0;

          }

          el.style.left = eX + "px";

          el.style.top = eY + "px";

        };

        document.onmouseup = function () {

          document.onmousemove = null;

        };

      };

    });

    let app = new Vue({

      el: "#app",

      data: {

      },

    });

  </script>

</html>