<template>
  <div>
		<h2>Constrain Draggable</h2>
		<Panel :bodyStyle="panelStyle">
			<div v-Draggable="{drag:onDrag}" :style="dragStyle">
				<p style="text-align:center">Drag Me</p>
			</div>
		</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: 500,
      containerHeight: 300,
      dragWidth: 100,
      dragHeight: 100
    };
  },
  computed: {
    panelStyle() {
      return {
        position: "relative",
        width: this.containerWidth + "px",
        height: this.containerHeight + "px"
      };
    },
    dragStyle() {
      return {
        border: "1px solid #ccc",
        width: this.dragWidth + "px",
        height: this.dragHeight + "px"
      };
    }
  },
  methods: {
    onDrag(event) {
      var d = event;
      if (d.left < 0) {
        d.left = 0;
      }
      if (d.top < 0) {
        d.top = 0;
      }
      if (d.left + this.dragWidth > this.containerWidth - 2) {
        d.left = this.containerWidth - 2 - this.dragWidth;
      }
      if (d.top + this.dragHeight > this.containerHeight - 2) {
        d.top = this.containerHeight - 2 - this.dragHeight;
      }
      d.target.applyDrag();
    }
  }
};
</script>