<template>
  <div class="dynamic">
  	<Row class="dynamic-row" type="flex" justify="space-between" v-cloak>
	  	<Col span="10">
	  		<Card draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event,'cr-button')">
	            <p slot="title">按钮</p>
	            <div class="dynamic-row-card">
		            <img
					  src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
					/>
	            	
	            </div>
	        </Card>
	  	</Col>
	  	<Col span="10">
	  		<Card draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event,'freedom-container')">
	            <p slot="title">自由容器</p>
	            <div class="dynamic-row-card">
		            <img
					  src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
					/>
	            	
	            </div>
	        </Card>
	  	</Col>
	  </Row>
	  <Row class="dynamic-row" type="flex" justify="space-between">
	  	<Col span="10">
	  		<Card draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event,'cr-field')">
	            <p slot="title">输入框</p>
	            <div class="dynamic-row-card">
		            <img
					  src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
					/>
	            	
	            </div>
	        </Card>
	  	</Col>
	  	<Col span="10">
	  		<Card draggable="true" @dragend.native="dragend" @dragstart.native="dragstart">
	            <p slot="title">轮播图</p>
	            <div class="dynamic-row-card">
		            <img
					  src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
					/>
	            	
	            </div>
	        </Card>
	  	</Col>
	  </Row>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less">
	.dynamic {
		margin-top: 10px;
		&-row {
			margin-bottom: 10px;
			p {
				text-align: center;
			}

			&-card {
				display: flex;
				justify-content: center;
				img {
					width: 64px;
					object-fit: fill;
					-webkit-user-drag: none;
				}
			}
		}
	}
</style>
