原生js实现拖拽效果

这篇具有很好参考价值的文章主要介绍了原生js实现拖拽效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原生js实现拖拽效果,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-795477.html

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        #mydiv {  
            width: 200px;  
            height: 200px;  
            background-color: red;  
            position: absolute;  
            cursor: move;  
        }  
    </style>  |
</head>  
<body>  
    <div id="mydiv">拖拽我</div>  
    <script>  
        var mydiv = document.getElementById('mydiv');  
        var x = 0, y = 0;  
        var limitX = window.innerWidth - 200; // 设置元素的最大宽度为屏幕宽度减去元素的宽度  
        var limitY = window.innerHeight - 200; // 设置元素的最大高度为屏幕高度减去元素的高度  
  
        mydiv.onmousedown = function(e) {  
            x = e.clientX - mydiv.getBoundingClientRect().left;  
            y = e.clientY - mydiv.getBoundingClientRect().top;  
            document.onmousemove = function(e) {  
                var newX = e.clientX - x;  
                var newY = e.clientY - y;  
                if (newX < 0) newX = 0; // 防止元素向左拖出屏幕外  
                if (newY < 0) newY = 0; // 防止元素向上拖出屏幕外  
                if (newX > limitX) newX = limitX; // 防止元素向右拖出屏幕外  
                if (newY > limitY) newY = limitY; // 防止元素向下拖出屏幕外  
                mydiv.style.left = newX + 'px';  
                mydiv.style.top = newY + 'px';  
            };  
            document.onmouseup = function() {  
                document.onmousemove = null; // 当鼠标松开时,移除鼠标移动事件  
            };  
        };  
    </script>  
</body>  
</html>
<template>
  <div class="drag-box">
    <div id="dragContent">
      <div class="drag-home">
        <div class="drag-title" v-show="titleVisible"><br><br></div>
        <div class="drag-switch">
          <div class="message">
            <div class="name">液压支架</div>
            <div class="info">当前操作:前立柱升</div>
            <div class="info">当前操作:前立柱升</div>
          </div>
          <div class="drag-button">
            <div class="menu">
              <el-button type="primary" round>采煤机</el-button>
              <el-button type="success" round>液压知己</el-button>
              <el-button type="info" round>总控开关</el-button>
            </div>
            <div class="stats">
              <el-button type="success" round v-for="(item, index) in 9" :key="index" style="width: 8rem;">按钮{{ item }}</el-button>
              <i v-for="item in 9" :key="item"></i>
            </div>
            <div class="submit">
              <el-button type="primary" round>启动</el-button>
              <el-button type="success" round>停止</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from 'vue'

export default {
  components: {},
  setup() {
    const state = reactive({
      rightDistance: '',
      leftWidth: '',
      maxWidth: '',
      titleVisible: false
    })

    onBeforeMount(() => {

    })

    onMounted(() => {
      var dragContent = document.getElementById('dragContent');
      var x = 0, y = 0;
      var limitX = window.innerWidth - 400; // 设置元素的最大宽度为屏幕宽度减去元素的宽度  
      state.maxWidth = limitX
      var limitY = window.innerHeight - 600; // 设置元素的最大高度为屏幕高度减去元素的高度  

      var box = document.getElementById("dragContent")
      box.addEventListener('mouseover', () => {
        if (state.drightDistance == 0) {
          box.style.left = `${state.maxWidth / 10}rem`
          box.style.transitionDuration =  '1s'
          setTimeout(() => {
            state.titleVisible = false
          }, 300)
        } else {
          box.style.transitionDuration =  '0s'
        }
      })
      
      box.addEventListener('mouseout', () => {
        if (state.drightDistance == 0) {
          box.style.left = `${state.maxWidth / 10 + 40}rem`
          box.style.transitionDuration =  '1s'
          setTimeout(() => {
            state.titleVisible = true
          }, 300)
        } else {
          box.style.transitionDuration =  '0s'
        }
      });

      dragContent.onmousedown = (e) => {
        x = e.clientX - dragContent.getBoundingClientRect().left;
        y = e.clientY - dragContent.getBoundingClientRect().top;
        document.onmousemove = function (e) {
          var newX = e.clientX - x;
          var newY = e.clientY - y;
          if (newX < 0) newX = 0; // 防止元素向左拖出屏幕外  
          if (newY < 0) newY = 0; // 防止元素向上拖出屏幕外  
          if (newX > limitX) newX = limitX; // 防止元素向右拖出屏幕外  
          if (newY > limitY) newY = limitY; // 防止元素向下拖出屏幕外  
          dragContent.style.left = newX + 'px';
          dragContent.style.top = newY + 'px';
          state.leftWidth = newX
          state.drightDistance = limitX - newX
          // console.log(state.leftWidth)
        };
        document.onmouseup = () => {
          document.onmousemove = null; // 当鼠标松开时,移除鼠标移动事件  
          console.log('当前坐标点', state.drightDistance)

          if (state.drightDistance == 0) {
            
          }
        }
      }
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>
<style lang="scss" scoped>
.drag-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}

#dragContent {
  width: 400px;
  height: 600px;
  position: absolute;
  right: 8rem;
  top: 50%;
  cursor: move;
  .drag-home {
    height: 100%;
    position: relative;
    background-color: #091659;
    border-radius: 3rem;
    .drag-title {
      position: absolute;
      left: -4rem;
      top: calc(50% - 8rem);
      font-size: 2rem;
      width: 4rem;
      height: 16rem;
      background: #0b133d;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem 0 0 1rem
    }
    .drag-switch {
      height: 100%;
      position: relative;
      .message {
        text-align: left;
        padding: 2rem;
        .name {
          font-size: 2.5rem;
          margin: 0.5rem 0;
        }
        .info {
          font-size: 1.4rem;
          margin: 0.3rem 0;
        }
      }
      .drag-button {
        height: 80%;
        background: #22387b;
        position: absolute;
        bottom: 0;
        width: 90%;
        left: 5%;
        border-radius: 2rem;
        .menu {
          margin: 1rem 0;
          height: 10%;
        }
        .stats {
          height: 75%;
          /*background: pink;*/
          justify-content: space-around;
          align-content: start;
          display: flex;
          flex-wrap: wrap;
          .el-button {
            margin: 1rem 0;
          }
          .el-button+.el-button {
            margin-left: unset;
          }
          i {
            margin: 1rem 0;
            width: 8rem;
          }
        }
        .submit {
          height: 15%;
        }
      }
    }
  }
}
</style>

到了这里,关于原生js实现拖拽效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(51)
  • 原生JS 表格列拖拽 适用JqGrid

    页面引用js就不用多说了,在class添加 不是JqGrid可以注释这个

    2024年02月07日
    浏览(46)
  • 原生JS的拖拽属性draggable(详解)

    摘要 作为h5新增的属性draggable,它能够给与一切的html元素拖动的效果。而在这个属性之下,也有着关于拖动效果的各个方法。 而这一篇文章,主要就是说一下关于draggable属性的使用以及工作场景。 1.了解draggable属性的使用 对我来讲,我希望在学习一个知识的时候,最开始就

    2023年04月19日
    浏览(36)
  • 原生js实现网页淘宝产品展示效果,鼠标移入小图展示对应大图(事件委托、事件传播、冒泡机制)【含完整代码】

    淘宝网页产品展示模块如下: 当鼠标移入小图,在上方会相应地展示大图 当鼠标移入小图,在上方会相应地展示大图;且当鼠标移出,图片停留在移入时显示的图片,不会改变。 本文实现效果如下(鼠标移入即改变,不用点击): 定义图片列表,为列表添加鼠标移入事件

    2024年02月07日
    浏览(40)
  • 如何使用CSS实现一个拖拽排序效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(44)
  • 实现简单的element-table的拖拽效果

    第一步,先随便创建element表格 第二步,里面的数据源tableData直接复制饿了么上的 第三步,需要安装sortablejs库并且在头部引入 第四步,通过ref获取table,这里给table的ref设置为dragTable 第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后

    2024年02月11日
    浏览(37)
  • [WPF]原生TabControl控件实现拖拽排序功能

    在UI交互中,拖拽操作是一种非常简单友好的交互。尤其是在ListBox,TabControl,ListView这类列表控件中更为常见。通常要实现拖拽排序功能的做法是自定义控件。本文将分享一种在原生控件上设置附加属性的方式实现拖拽排序功能。 该方法的使用非常简单,仅需增加一个附加属

    2024年02月08日
    浏览(43)
  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(46)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • tauri-react:快速开发跨平台软件的架子,支持自定义头部UI拖拽移动和窗口阴影效果

    一个使用 tauri+react+ts+antd 开发跨平台软件的模板,支持窗口头部自定义和窗口阴影,不用再自己做适配了,拿来即用,非常 nice。而且已经封装好了 tauri 的 http 请求工具,省去很多弯路。 开原地址:GitHub - Sjj1024/tauri-react: 一个最基础的使用tauri和react开发跨平台应用软件的架

    2024年02月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包