vue-grid-layout 中文文档
vue-grid-layout 只允许某个元素允许拖动
vue-grid-layout 可以设置单元格中只允许某个元素允许拖动。
允许拖动
<!-- drag-allow-from 属性设置只允许span标签拖动单元格-->
<grid-item drag-allow-from="span" >
{{item.i}} 只能点SPAN标签拖动<span>SPAN</span>
</grid-item>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue-grid-layout 只允许某个元素拖动</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/vue-grid-layout/vue-grid-layout.umd.min.js"></script>
</head>
<body style="padding:10px;">
<div id="app">
<div class="layout">
<grid-layout :layout.sync="layout1" :col-num="12" :row-height="30" :is-draggable="true" :margin="[10, 10]">
<grid-item v-for="item in layout1" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"
:key="item.i" drag-allow-from="span">
{{item.i}} 只能点SPAN标签拖动<span>SPAN</span>
</grid-item>
</grid-layout>
</div>
<div>{{message}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
data() {
return {
message: '',
layout1: [
{ "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" },
{ "x": 2, "y": 0, "w": 2, "h": 2, "i": "1" }
]
};
},
methods: {
}
});
</script>
<style scoped>
.layout {
background: #eee;
margin: 10px;
}
.layout span {
padding: 3px 6px;
background: red;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
.vue-draggable-handle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
background-position: bottom right;
padding: 0 8px 8px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: pointer;
}
</style>
</body>
</html>