useInteract #

<script setup lang="ts">
import { ref } from 'vue';
import { useDraggableAndResizable } from '@/hooks/vue/useInteract';

const windowRef = ref<HTMLElement | null>(null);

const { 
  initInteract, 
  destroyInteract,
  position,
  isDragging 
} = useDraggableAndResizable(windowRef, {
  initialPosition: 'center',
  draggable: true,
  resizable: true,
  autoInit: true, // 自动初始化和清理
});
</script>

<template>
  <div ref="windowRef" class="my-window">
    <p>位置: {{ position.x }}, {{ position.y }}</p>
    <p>拖拽中: {{ isDragging }}</p>
  </div>
</template>

<style scoped>
.my-window {
  position: absolute;
  touch-action: none; /* 必需:禁用触摸默认行为 */
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import { useDraggableAndResizable } from '@/hooks/vue/useInteract';

const boxRef = ref<HTMLElement | null>(null);

const { position, size } = useDraggableAndResizable(boxRef, {
  autoInit: true, // 自动初始化
  initialPosition: 'center',
});
</script>

<template>
  <div ref="boxRef" class="box">
    <p>位置: {{ position.x.toFixed(0) }}, {{ position.y.toFixed(0) }}</p>
    <p>尺寸: {{ size.width.toFixed(0) }} x {{ size.height.toFixed(0) }}</p>
  </div>
</template>

<script setup lang="ts">
const { initInteract } = useDraggableAndResizable(boxRef, {
  draggable: true,
  resizable: false, // 禁用缩放
  autoInit: true,
});
</script>

<script setup lang="ts">
// 不覆盖 CSS 定位,保持元素原有位置
const { initInteract } = useDraggableAndResizable(boxRef, {
  initialPosition: 'current', // 默认值
  autoInit: true,
});
</script>

<template>
  <div ref="boxRef" style="position: absolute; left: 100px; top: 100px;">
    保持原有位置
  </div>
</template>

<script setup lang="ts">
const { initInteract } = useDraggableAndResizable(boxRef, {
  initialPosition: 'custom',
  customPosition: { x: 100, y: 200 },
  autoInit: true,
});
</script>

<script setup lang="ts">
const { initInteract } = useDraggableAndResizable(windowRef, {
  dragHandle: '.drag-handle', // 只有 .drag-handle 元素可拖拽
  minWidth: 400,
  minHeight: 300,
  autoInit: true,
});
</script>

<template>
  <div ref="windowRef" class="window">
    <div class="drag-handle">拖动这里移动窗口</div>
    <div class="content">窗口内容</div>
  </div>
</template>

<script setup lang="ts">
const { position, savePosition, restorePosition } = useDraggableAndResizable(boxRef, {
  persistPosition: true,
  storageKey: 'my-window-position', // 自定义存储键名
  autoInit: true,
  onDragEnd: () => {
    console.log('位置已自动保存');
  },
});

// 手动保存/恢复
function handleSave() {
  savePosition();
}

function handleRestore() {
  restorePosition();
}
</script>

<script setup lang="ts">
const { isDragging, isResizing } = useDraggableAndResizable(boxRef, {
  autoInit: true,
  onDragStart: (pos) => {
    console.log('开始拖拽:', pos);
  },
  onDragMove: (pos) => {
    console.log('拖拽中:', pos);
  },
  onDragEnd: (pos) => {
    console.log('拖拽结束:', pos);
  },
  onResizeStart: (size) => {
    console.log('开始缩放:', size);
  },
  onResizeEnd: (size) => {
    console.log('缩放结束:', size);
  },
});
</script>

<template>
  <div ref="boxRef" class="box">
    <div v-if="isDragging" class="status">拖拽中...</div>
    <div v-if="isResizing" class="status">缩放中...</div>
  </div>
</template>

<script setup lang="ts">
const { initInteract } = useDraggableAndResizable(boxRef, {
  restrictTo: 'viewport', // 限制在视口内
  autoInit: true,
});
</script>

<script setup lang="ts">
const { position, size, setPosition, setSize, resetPosition } = useDraggableAndResizable(boxRef, {
  autoInit: true,
});

function moveToCenter() {
  const rect = boxRef.value?.getBoundingClientRect();
  if (rect) {
    setPosition({
      x: (window.innerWidth - rect.width) / 2,
      y: (window.innerHeight - rect.height) / 2,
    });
  }
}

function resize() {
  setSize({ width: 500, height: 400 });
}

function reset() {
  resetPosition();
}
</script>

<template>
  <div>
    <button @click="moveToCenter">移到中心</button>
    <button @click="resize">调整尺寸</button>
    <button @click="reset">重置位置</button>
    <div ref="boxRef" class="box">可控制的窗口</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDraggableAndResizable } from '@/hooks/vue/useInteract';

const modalRef = ref<HTMLElement | null>(null);
const isVisible = ref(false);

const { 
  initInteract, 
  destroyInteract,
  position,
  size,
  isDragging,
  resetPosition,
} = useDraggableAndResizable(modalRef, {
  initialPosition: 'center',
  draggable: true,
  resizable: true,
  minWidth: 600,
  minHeight: 400,
  maxWidth: 1200,
  maxHeight: 800,
  dragHandle: '.modal-header',
  persistPosition: true,
  storageKey: 'app-modal-position',
  onDragStart: () => {
    console.log('开始拖拽模态窗口');
  },
});

function showModal() {
  isVisible.value = true;
  // 等待 DOM 更新后初始化
  nextTick(() => {
    initInteract();
  });
}

function closeModal() {
  isVisible.value = false;
  destroyInteract();
}
</script>

<template>
  <div>
    <button @click="showModal">打开模态窗口</button>
    
    <div v-if="isVisible" class="modal-overlay">
      <div ref="modalRef" class="modal" :class="{ dragging: isDragging }">
        <div class="modal-header">
          <h3>可拖拽模态窗口</h3>
          <button @click="resetPosition">重置位置</button>
          <button @click="closeModal">关闭</button>
        </div>
        <div class="modal-body">
          <p>位置: {{ position.x.toFixed(0) }}, {{ position.y.toFixed(0) }}</p>
          <p>尺寸: {{ size.width.toFixed(0) }} x {{ size.height.toFixed(0) }}</p>
          <p>窗口内容...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  position: absolute;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  touch-action: none;
  transition: box-shadow 0.2s;
}

.modal.dragging {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 16px;
  background: #f5f5f5;
  cursor: move;
  user-select: none;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 20px;
}
</style>