拖拽图片js

拖拽图片js

vue图片McBigPicture.vue

<template>
  <div class="demo-image__placeholder" >
    <div class="block draggable-box" :style="{width:bigpicturewidth+'px',height:bigpictureheight+'px'}">
      <el-image  :style="{width:bigpicturewidth+'px',height:bigpictureheight+'px'}" :lazy="islazy" :src="src" :fit="bigpicturefit" :alt="bigpicturealt">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <mc-picture-item class="draggable-item" v-draggable></mc-picture-item>
    </div>
  </div>
</template>

<script>
import McPictureItem from "./McPictureItem";
import draggable from "./js/draggable";
export default {
  name: "McBigPicture",
  components: {McPictureItem},
  props:{
    datamanager: {type: String, default: ""},
    bigpictureurl:{type:String,default:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"},
    bigpicturefit:{type:String,default:"fill"},
    bigpicturealt:{type:String,default:"填入alt"},
    bigpictureislazy:{type:String,default:"true"},
    bigpicturezindex:{type:String,default:"0"},
    bigpicturewidth:{type:String,default:"1000"},
    bigpictureheight:{type:String,default:"500"}

  },
  directives: {
    draggable
  },
  data(){
    return{
      src: this.bigpictureurl,
      islazy:Boolean(this.bigpictureislazy),
      zindex:Number(this.bigpicturezindex),
    }
  },

}
</script>

<style scoped>

.draggable-box{
  position: relative;
}
.draggable-item{
  background-color: #fff;
  position: absolute;
}
</style>

vue图片McPictureItem.vue

<template>
  <div class="imgdiv" >
    <el-main>
      <el-image
        class="imgimg"
        :style="{'width': iwidth+'px', 'height': iheight+'px'}"
        :src="iurl"
        :fit="ifit"
        :alt="ialt"
        :lazy="ilazy"
        :z-index="izindex">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <div class="imgtitle">{{ iimgtitle }}</div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "McPictureItem",
  props:{
    ifit:{type:String, default:"contain"},
    iimgtitle:{type:String, default:"EEC15"},
    ialt:{type:String, default:"图片显示"},
    iwidth:{type:String, default:"30"},
    iheight:{type:String, default:"30"},
    iurl:{type:String,
      default:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    },
    ilazy:{type:Boolean, default:false},
    izindex:{type:Number, default:2000},
  },
  data(){
    return{
      items: [
        "/static/uploads/af/43/af43e036-f463-4f84-8e8e-ace11c612d6b.jpg",
        "/static/uploads/f0/0a/f00ab360-b8ef-4f14-b29c-9fda2234c6ce.jpg",
        "/static/uploads/e8/f9/e8f930b6-2210-4532-abc9-559033a2c1f0.jpg",
        "/static/uploads/d2/0e/d20e6e4a-afae-49ef-a308-ca2d410a6b6b.jpg"

      ],
      dragging: null
    }
  },

}
</script>

<style scoped>
.imgdiv{
  width:50px;
  height:60px;
  text-align: center;
  border-radius: 5%;
  border:1px solid rgba(0,0,0,0.1);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
  margin-right:20px;
}
.imgdiv:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  cursor: pointer;
}
.el-main{
  padding:0 !important;
}
.imgtitle{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 5%;
  color:rgba(0,0,0,0.5);
  font-weight: bolder;
  font-size: 12px;
}
.imgimg{
  border:2px solid rgba(0,0,0,0.1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  margin-top:5%;

}
</style>

dragable.js

const draggable = {
  inserted: function (el) {
    el.style.cursor = 'move'
    el.onmousedown = function (e) {
      let disx = e.pageX - el.offsetLeft
      let disy = e.pageY - el.offsetTop
      document.onmousemove = function (e) {
        let x = e.pageX - disx
        let y = e.pageY - disy
        let maxX = parseInt(window.getComputedStyle(el.parentElement).width) - parseInt(window.getComputedStyle(el).width)
        let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)

        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }

        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }

        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  },
}
export default draggable