1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>

<!-- 浮动播放器 -->
<div class="netease-mini-player"
     id="draggable-player"
     data-playlist-id="17726868618"
     data-lyric="true"
     data-theme="auto"
     data-autoplay="false"
     style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; cursor: move; user-select: none;">
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const player = document.getElementById('draggable-player');
    if (!player) return;

    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;

    // 开始拖拽
    function startDragging(e) {
      // 只允许在播放器非控制区域拖动（避免点按钮/进度条时也拖）
      if (e.target.closest('.control, .progress, .volume, .lyric')) return;

      isDragging = true;

      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - currentX;
        initialY = e.touches[0].clientY - currentY;
      } else {
        initialX = e.clientX - currentX;
        initialY = e.clientY - currentY;
      }

      // 鼠标样式提示正在拖动
      player.style.cursor = 'grabbing';
    }

    // 拖拽中
    function drag(e) {
      if (!isDragging) return;

      e.preventDefault();

      if (e.type === "touchmove") {
        currentX = e.touches[0].clientX - initialX;
        currentY = e.touches[0].clientY - initialY;
      } else {
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
      }

      // 限制不飞出屏幕（可选）
      const rect = player.getBoundingClientRect();
      const maxX = window.innerWidth - rect.width - 10;
      const maxY = window.innerHeight - rect.height - 10;

      currentX = Math.max(10, Math.min(currentX, maxX));
      currentY = Math.max(10, Math.min(currentY, maxY));

      player.style.left = currentX + 'px';
      player.style.top = currentY + 'px';
      player.style.bottom = 'auto';    // 清除原来的 bottom
      player.style.right = 'auto';     // 清除原来的 right
    }

    // 结束拖拽
    function stopDragging() {
      isDragging = false;
      player.style.cursor = 'move';
    }

    // 初始化位置（重要！）
    currentX = window.innerWidth - 20 - 400;  // 假设播放器宽度约300px，从右下开始
    currentY = window.innerHeight - 20 - 120; // 假设高度约80px
    player.style.left = currentX + 'px';
    player.style.top = currentY + 'px';

    // 绑定事件
    player.addEventListener('mousedown', startDragging);
    player.addEventListener('touchstart', startDragging);

    document.addEventListener('mousemove', drag);
    document.addEventListener('touchmove', drag);

    document.addEventListener('mouseup', stopDragging);
    document.addEventListener('touchend', stopDragging);
  });
</script>