js实现dom拖动效果，超出会提示

冬天不会冷ll
已于 2022-10-14 16:41:59 修改
阅读量491
点赞数
文章标签： javascript vue.js 前端
于 2022-10-13 10:38:16 首次发布
本文链接：https://blog.youkuaiyun.com/weixin_48567214/article/details/127296650
版权
1.效果图
在这里插入图片描述
代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #drag_area {
            position: relative;
            overflow-x: hidden;
            width: 90%;
            height: 100px;
            margin: 100px auto 0;
            border: 1px solid #666;
        }

        .div_tag {
            width: 100px;
            display: inline-block;
            padding: 10px;
            margin-top: 20px;
            overflow: hidden;
        }

        .el-tag {
            position: absolute;
            z-index: 999;
            cursor: move;
            text-overflow: ellipsis
        }

        .el-tag+.el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
    <div id="app">
        <div id="drag_area">
            <div :key="tag" v-for="tag in dynamicTags" class="div_tag">
                <el-tag v-if="tag === 'name' || tag === 'scene'" class="el-tag" :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-tag v-else class="el-tag" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
            </div>
        </div>

        <div style="margin: 20px 0 0 5% ;">
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
        </div>
    </div>


    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    dynamicTags: ['标签一', "name", '标签二', "scene", '标签三', '标签4', '标签5', '标签6'],
                    inputVisible: false,
                    inputValue: '',
                    tags: []
                }
            },
            methods: {
                 setTagsMove() {
      var tags = document.getElementsByClassName("el-tags");
      var moveArea = document.getElementById("drag_area");
      this.leftList = [];
      for (let i = 0; i < tags.length; i++) {
        ((i) => {
          tags[i].onmousedown = (evt) => {
            //鼠标按下事件
            var distanceX = evt.clientX - tags[i].offsetLeft; //clientX表示鼠标指针的坐标
            //   var distanceY = evt.clientY - tags[i].offsetTop; //offsetTop获取元素距离上面的位置，返回的是数字
            document.onmousemove = (evt) => {
              //鼠标移动事件
              var left = evt.clientX - distanceX; //获取拖动是元素的位置
              // var top = evt.clientY - distanceY;
              if (left <= 0) {
                //防止越过浏览器左边缘
                left = 0;
              } else if (left >= moveArea.clientWidth - tags[i].offsetWidth) {
                //防止越过右边缘
                left = moveArea.clientWidth - tags[i].offsetWidth;
              }
              if (top <= 0) {
                top = 0;
              } else if (top >= moveArea.clientHeight - tags[i].offsetHeight) {
                top = moveArea.clientHeight - tags[i].offsetHeight;
              }
              // tags[i].style.top = top + "px"; //重新设置元素位置
              tags[i].style.left = left + "px";
            };
            tags[i].onmouseup = (e) => {
              //鼠标抬起事件
              document.onmousemove = null; //清除鼠标按下事件
              tags[i].onmouseup = null;
              this.leftList.push(tags[i].offsetLeft);
              flag = false;
            };
            moveArea.onselectstart = function () {
              return false;
            };
          };
          document.onmouseup = () => {
            document.onmousemove = null;
          };
        })(i);
      }
    },
                handleClose(tag) {
                    this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                },

                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },

                handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (inputValue) {
                        this.dynamicTags.push(inputValue);
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                    this.$nextTick(_ => {
                        var tags = document.getElementsByClassName("el-tag");
                        if (this.dynamicTags.length > 5) {
                            for (let i = 0; i < tags.length; i++) {
                                tags[i].style.width = 50 + 'px'
                                console.dir(tags[i].style.width);
                            }
                        }
                    });
                },
            },
            mounted() {
                this.setTagsMove()
            },
            updated() {
                this.setTagsMove();
            },
        })
    </script>
</body>

</html>