<template>
  <!--watchstart-->

  <el-row>
    <el-col :span="24">
      <div class="grid-content"
           :id="'row1-col1'"
           draggable="true"
           @dragstart="handleDragStart($event, 'row1-col1')"
           @dragover="handleDragOver($event, 'row1-col1')"
           @dragleave="handleDragLeave"
           @drop="handleDrop($event, 'row1-col1')">
        <div class="drop-hint left" v-if="dropInfo.targetId === 'row1-col1' && dropInfo.direction === 'left'"></div>
        <div class="drop-hint right" v-if="dropInfo.targetId === 'row1-col1' && dropInfo.direction === 'right'"></div>
        111
      </div>
    </el-col>
  </el-row>

  <!-- 其他el-col结构按相同模式添加 -->
  <el-row>
    <el-col :span="12">
      <div class="grid-content"
           :id="'row2-col1'"
           draggable="true"
           @dragstart="handleDragStart($event, 'row2-col1')"
           @dragover="handleDragOver($event, 'row2-col1')"
           @dragleave="handleDragLeave"
           @drop="handleDrop($event, 'row2-col1')">
        <div class="drop-hint left" v-if="dropInfo.targetId === 'row2-col1' && dropInfo.direction === 'left'"></div>
        <div class="drop-hint right" v-if="dropInfo.targetId === 'row2-col1' && dropInfo.direction === 'right'"></div>
        222
      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content"
           :id="'row2-col2'"
           draggable="true"
           @dragstart="handleDragStart($event, 'row2-col2')"
           @dragover="handleDragOver($event, 'row2-col2')"
           @dragleave="handleDragLeave"
           @drop="handleDrop($event, 'row2-col2')">
        <div class="drop-hint left" v-if="dropInfo.targetId === 'row2-col2' && dropInfo.direction === 'left'"></div>
        <div class="drop-hint right" v-if="dropInfo.targetId === 'row2-col2' && dropInfo.direction === 'right'"></div>
        333
      </div>
      <!-- 其他元素同理 -->
    </el-col>
  </el-row>

  <!--watchend-->
</template>

<script setup name="Index">
import { ref } from 'vue'

// 拖动状态
const dragElement = ref(null)
const dropInfo = ref({
  targetId: null,
  direction: null
})

// 拖动开始
const handleDragStart = (e, elementId) => {
  dragElement.value = elementId
  e.dataTransfer.effectAllowed = 'move'
}

// 拖动悬停处理
const handleDragOver = (e, targetId) => {
  e.preventDefault()
  const target = e.currentTarget
  const rect = target.getBoundingClientRect()
  const x = e.clientX - rect.left

  dropInfo.value = {
    targetId,
    direction: x < rect.width / 2 ? 'left' : 'right'
  }
}

// 拖动离开
const handleDragLeave = () => {
  dropInfo.value = { targetId: null, direction: null }
}

// 放置处理
const handleDrop = (e, targetId) => {
  e.preventDefault()
  if (!dragElement.value || !targetId) return

  console.log(`元素 ${dragElement.value} 放置到 ${targetId} 的 ${dropInfo.value.direction}侧`)

  // 重置状态
  dragElement.value = null
  dropInfo.value = { targetId: null, direction: null }
}
</script>
<style lang='scss' scoped>
/* 基础网格样式 */
.grid-content {
  border: 1px solid #e4e7ed;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  cursor: move;
  user-select: none;
  background: white;
  z-index: 1;

  /* 悬停效果 */
  &:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
    transform: translateY(-2px);
    z-index: 2;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 拖放指示器 */
  .drop-hint {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 3;
    pointer-events: none;

    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: #409eff;
      font-weight: 500;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 左侧指示 */
    &.left {
      left: 0;
      border-left: 3px solid #409eff;

      &::after {
        content: "← 放置左侧";
        left: 10px;
      }
    }

    /* 右侧指示 */
    &.right {
      right: 0;
      border-right: 3px solid #409eff;

      &::after {
        content: "放置右侧 →";
        right: 10px;
      }
    }
  }

  /* 拖放时的半透明效果 */
  &[draggable="true"]:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* 当前拖拽元素的样式 */
  &.drag-overlay {
    opacity: 0.5;
    transform: rotate(3deg);
  }
}

/* 行间距 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

/* 拖放过程的状态指示 */
.drag-enter {
  background: linear-gradient(
      45deg,
      rgba(64, 158, 255, 0.1) 25%,
      transparent 25%,
      transparent 50%,
      rgba(64, 158, 255, 0.1) 50%,
      rgba(64, 158, 255, 0.1) 75%,
      transparent 75%,
      transparent
  );
  background-size: 40px 40px;
  animation: dragStripes 3s linear infinite;
}

@keyframes dragStripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* 优化移动端触摸体验 */
@media (hover: none) {
  .grid-content {
    touch-action: manipulation;
    &:active {
      transform: scale(0.96);
    }
  }
}
</style>





