Vue实现开关按钮拖拽效果

网络编程 发布日期:2024/9/22 浏览次数:1

正在浏览:Vue实现开关按钮拖拽效果

本文实例为大家分享了Vue实现开关按钮拖拽效果的具体代码,供大家参考,具体内容如下

css:

<style>
  .box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;
  }
  .box2 {
    position: absolute;
    left: 400px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

html:

<div id="app">

  <div class="box" v-drag="isDrag"></div>

  <div class="box2" v-drag:fn.limit.b="isDrag"></div>

  <button @click="isDrag = !isDrag">{{isDrag}}</button>

</div>

js:

<script src="/UploadFiles/2021-04-02/vue.js">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。