Vue2 指定尺寸内进行拖拽

简介: Vue2 指定尺寸内进行拖拽

npm i -s vue-drag-resize

<template>
    <div>
        <div class="father">
        <VueDragResize  v-for="item in imglist" :key="item.id" :w="150" :h="100"  :x="item.xind" :y="item.yind" :parent-limitation="true" :is-resizable="false"
             >
            <img :src="item.img" alt=""  style="width: 150px;height: 100px;">
            <p class="cons" style="position: absolute; top:30%;left: 35%;color: white;">{{ item.con }}</p>
            <span style="position: absolute; top:2%;left: 85%;color: white;" @click="delclick">X</span>
        </VueDragResize>
        <!-- <VueDragResize :w="150" :h="100"  :x="200" :y="100" :parent-limitation="true" @clicked="act(1)"
            @activated="onActivated">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0" alt="" style="width: 150px;height: 100px;">
        </VueDragResize> -->
    </div>
    </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
    name: 'Drag-d2',
    data() {
        return {
           imglist:[
            {id:'01',con:"图一",xind:10,yind:20,img:"https://ts1.cn.mm.bing.net/th/id/R-C.5a49085e4afe4261c8994e7b2ad91842?rik=VxQQBSuFk%2f%2ftaA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fbbs4%2f200810%2f17%2f1224206085128.jpg&ehk=QaHcMJfNlSmAGrzRh6DkCiRkBlEs9J5Tw95WfADpO9E%3d&risl=&pid=ImgRaw&r=0"},
            {id:'02',con:"图二",xind:200,yind:100,img:"https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0"},
           ]
        }
    },
    components: {
        VueDragResize
    },
    methods: {
    }
}
</script>
<style scoped>
.father {
    height: 60vh;
    width: 70vw;
    border: 1px solid red;
    position: relative;
    margin: 0 auto;
}
.drag {
    border: 2px solid red;
}
</style>
相关文章
|
JavaScript
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
488 2
|
JavaScript
vue中的拖拽事件
vue中的拖拽事件
303 0
|
6月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
756 77
Vue3拖拽插件(vuedraggable@next)
vuedraggable 是一款 Vue2 拖拽插件,可轻松实现列表项的拖拽排序与交互。通过简单配置,即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。
1435 2
Vue3拖拽插件(vuedraggable@next)
|
JavaScript
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
3782 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
256 2
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
122 1
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
703 1