用javascript做一个仿回收站

最新推荐文章于 2024-04-22 15:58:10 发布

早睡选手第一名

最新推荐文章于 2024-04-22 15:58:10 发布

阅读量3.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zmm0413/article/details/80637459

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

以下是我要达到的效果，当1、2、3、4完全进入回收站时，松开鼠标时被回收，当未完全进入回收站时，松开鼠标回到原位。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{position:relative;}
div{width:150px;height:100px;position:absolute;color:#fff;line-height:100px;text-align:center;display:block;}
#div1{background-color:#09f;left:10px;top:20px;z-index:2;}
#div2{background-color:#f00;left:200px;top:20px;z-index:2;}
#div3{background-color:#0f0;left:10px;top:140px;z-index:2;}
#div4{background-color:#ff0;left:200px;top:140px;z-index:2;}
#div5{background-color:#ccc;left:380px;top:20px;width:500px;height:220px;color:#fff;line-height:220px;text-align:center;font-size:32px;}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">回收站</div>
<script>
var aDiv = document.getElementsByTagName("div");
var orleft;
var ortop;
var ordis;
for (var i = 0; i < 4; i++) {
  drag(aDiv[i]);
}
function drag(obj) {
  obj.onmousedown = function (ev) {
    obj.style.zIndex = 3;
    ev = ev || event;
    that = this;
    orleft = getStyle(this, "left");
    ortop = getStyle(this, "top");
    console.log(orleft);
    console.log(ortop);
    var disX = ev.clientX - this.offsetLeft;
    var disY = ev.clientY - this.offsetTop;
    document.onmousemove = function (ev) {
      ev = ev || event;
      var newleft = ev.clientX - disX;
      var newtop = ev.clientY - disY;
      if (newleft < 0) {
        newleft = 0;
      }
      if (newtop < 0) {
        newtop = 0;
      }
      if (newleft + obj.offsetWidth > document.documentElement.clientWidth) {
        newleft = document.documentElement.clientWidth - obj.offsetWidth;
      }
      if (newtop + obj.offsetHeight > document.documentElement.clientHeight) {
        newtop = document.documentElement.clientHeight - obj.offsetHeight;
      }

      obj.style.left = newleft + "px";
      obj.style.top = newtop + "px";
      ordis = getStyle(that, "diaplay");
    };
  };

  document.onmouseup = function () {
    document.onmousemove = null;
    if (
      that.offsetLeft > aDiv[4].offsetLeft &&
      that.offsetLeft <
        aDiv[4].offsetLeft + aDiv[4].offsetWidth - obj.offsetWidth &&
      that.offsetTop > aDiv[4].offsetTop &&
      that.offsetTop <
        aDiv[4].offsetTop + aDiv[4].offsetHeight - obj.offsetHeight
    ) {
      that.style.display = "none";
    }

    if ((ordis = "block")) {
      that.style.left = orleft;
      that.style.top = ortop;
    }
  };
}

function getStyle(obj, attr) {
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
</script>
</body>
</html>

Vue版：

<template>
  <div>
    <div
      @mousedown="divMousedown($event, 1)"
      @mousemove="divMousemove($event, 1)"
      id="div1"
      ref="div1"
    >1</div>
    <div
      @mousedown="divMousedown($event, 2)"
      @mousemove="divMousemove($event, 2)"
      id="div2"
      ref="div2"
    >2</div>
    <div
      @mousedown="divMousedown($event, 3)"
      @mousemove="divMousemove($event, 3)"
      id="div3"
      ref="div3"
    >3</div>
    <div
      @mousedown="divMousedown($event, 4)"
      @mousemove="divMousemove($event, 4)"
      id="div4"
      ref="div4"
    >4</div>
    <div id="div5" ref="div5">回收站</div>
  </div>
</template>

<script>
export default {
	data(){
		return{
          orleft: 0,
          ortop: 0,
          ordis: 0,
          disX: 0,
          disY: 0,
          newleft: 0,
          newtop: 0,
          obj: null
		}
  },
  mounted(){
    document.addEventListener('mouseup', this.divMouseUp, true)
  },
  methods: {
    divMousedown(ev, i) {
      this.obj = this.$refs['div'+i];
      this.obj.style.zIndex = 3;
      this.orleft = this.getStyle("left");
      this.ortop = this.getStyle("top");
      this.disX = ev.clientX - this.obj.offsetLeft;
      this.disY = ev.clientY - this.obj.offsetTop;
    },
    divMousemove(ev, i) {
        if(this.obj){
          this.newleft = ev.clientX-this.disX < 0 ? 0 : ev.clientX-this.disX;
          this.newtop = ev.clientY-this.disY < 0 ? 0 : ev.clientY-this.disY;
          if((this.newleft+this.obj.offsetWidth)>document.documentElement.clientWidth){
            this.newleft = document.documentElement.clientWidth-this.obj.offsetWidth;
          }
          if((this.newtop+this.obj.offsetHeight)>document.documentElement.clientHeight){
            this.newtop = document.documentElement.clientHeight-this.obj.offsetHeight;
          }
          this.obj.style.left = this.newleft + "px";
          this.obj.style.top = this.newtop + "px";
          this.ordis = this.getStyle(this.obj, "display")
        }
    },
    divMouseUp() {
      if(this.obj){
        this.obj.onmousemove = null;
        if(this.obj.offsetLeft>this.$refs.div5.offsetLeft&&
          this.obj.offsetLeft<this.$refs.div5.offsetLeft+this.$refs.div5.offsetWidth-this.obj.offsetWidth&&
          this.obj.offsetTop>this.$refs.div5.offsetTop&&
          this.obj.offsetTop<this.$refs.div5.offsetTop+this.$refs.div5.offsetHeight-this.obj.offsetHeight){
            this.obj.style.display = 'none';
        }
        if(this.ordis="block"){
          this.obj.style.left = this.orleft;
          this.obj.style.top = this.ortop;
          this.obj = null;
        }
      }
    },
    getStyle(attr){
      return this.obj.currentStyle ? this.obj.currentStyle[attr]:getComputedStyle(this.obj)[attr];
    }
  },
};
</script>

<style scoped>
body {
  position: relative;
}
div {
  width: 150px;
  height: 100px;
  position: absolute;
  color: #fff;
  line-height: 100px;
  text-align: center;
  display: block;
  border-radius: 10%;
}
#div1 {
  background-color: lightcoral;
  left: 10px;
  top: 20px;
  z-index: 2;
}
#div2 {
  background-color: #a6eb96;
  left: 200px;
  top: 20px;
  z-index: 2;
}
#div3 {
  background-color: lightpink;
  left: 10px;
  top: 140px;
  z-index: 2;
}
#div4 {
  background-color: #a99ce4;
  left: 200px;
  top: 140px;
  z-index: 2;
}
#div5 {
  background-color: #ccc;
  left: 380px;
  top: 20px;
  width: 500px;
  height: 220px;
  color: #fff;
  line-height: 220px;
  text-align: center;
  font-size: 32px;
}
</style>

早睡选手第一名

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用javascript做一个仿回收站

以下是我要达到的效果，当1、2、3、4完全进入回收站时，松开鼠标时被回收，当未完全进入回收站时，松开鼠标回到原位。代码如下：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style type=&quo
复制链接

扫一扫