<template>
	<view class='draggable is-pointer-down is-dragging draggable_dom' id='qidian_dom'>
		<text class="icon-service"></text>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				name: ''
			}
		},
		mounted(){
			var $draggable = $('.draggable').draggabilly({
			  containment: true
			});
			// $('.draggable').parent().css('min-height','100vh');
			$draggable.on('staticClick', function( event, pointer ) {
			  $('#qidian_dom').click();
			})
			// var elem = document.querySelector('.draggable');
			// this.$draggable = new Draggabilly(elem, {
			//   containment: true
			// });

			// this.$draggable.$on('staticClick', function( event, pointer ) {
			//   elem.click();
			// })
		}
	}
</script>

<style lang="less">
	.draggable_dom{
		line-height: 1;
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		cursor: pointer;
		text-align: center;
		background: #ff9232;
		position: fixed;
		bottom: 180rpx;
		right: 10rpx;
		z-index:2000000000
	}
	.icon-service{
		display: inline-block;
		position: relative;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		background: url(https://bqq.gtimg.com/qidian/src/wpa/dist/4.1.0/images/icon-im-44-white-2x.png) no-repeat;
		background-size: 40rpx 40rpx;
		opacity: 1;
		cursor: pointer;
	}
</style>