如何将CSS+JavaScript自定义按钮定位在靠近右上角的位置？

问题说明 #

右上角带有“Button”文本的红色按钮是Wix编辑器内置的可拖拽按钮，可自由拖动调整位置。但通过CSS和JavaScript自定义的按钮无法拖拽，且难以定位到与内置按钮一致的右上角位置，当前自定义按钮处于页面中间。

修改方案 #

1. 定位到右上角

修改.btn的CSS定位属性，替换原有的居中布局代码：

• 移除top: 50%; left: 50%; margin-top: -32px; margin-left: -32px
• 添加top: 20px; right: 20px; margin: 0（可根据内置按钮实际位置调整top和right的数值）

2. 实现拖拽功能

添加JavaScript拖拽逻辑，监听鼠标的mousedown、mousemove、mouseup事件，记录拖动时的位置偏移并更新按钮坐标。

修改后的完整代码 #

<div class="btn">
  <div class="part1"></div>
  <div class="part2"></div>
</div>

<style>
body, html {
  margin: 0;
  background-color: #3498db;
}
.btn {
  width: 64px;
  height: 64px;
  background-color: #e74c3c;
  position: absolute;
  /* 修改定位为右上角 */
  top: 20px;
  right: 20px;
  margin: 0;
  box-shadow: 0 0 0 2px #fff;
  cursor: move; /* 鼠标样式改为拖动 */
  transition: all .2s ease-out;
}
.btn:active {
  background-color: #c0392b;
}
.part1, .part2 {
  width: 32px;
  height: 32px;
  background-image: url(https://cdn0.iconfinder.com/data/icons/feather/96/591275-arrow-up-64.png);
  background-size: 32px;
  float: left;
  transition: all .2s ease-out;
}
.part1 {
  transform: rotate(-135deg);
  position: relative;
  top: 32px
}
.part2 {
  transform: rotate(45deg);
}
.btn.fullscreen {
  transform: scale(1.1);
}
.btn.fullscreen .part1 {
  transform: rotate(45deg);
}
.btn.fullscreen .part2 {
  transform: rotate(225deg);
}
</style>

<script>
const btn = document.querySelector('.btn');
let isDragging = false;
let offsetX, offsetY;

// 拖拽开始
btn.addEventListener('mousedown', function(e) {
  isDragging = true;
  // 计算鼠标相对于按钮左上角的偏移
  offsetX = e.clientX - btn.getBoundingClientRect().left;
  offsetY = e.clientY - btn.getBoundingClientRect().top;
  e.preventDefault();
});

// 拖拽移动
document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  // 更新按钮位置
  btn.style.left = `${e.clientX - offsetX}px`;
  btn.style.top = `${e.clientY - offsetY}px`;
  // 移除right属性避免定位冲突
  btn.style.right = 'auto';
});

// 拖拽结束
document.addEventListener('mouseup', function() {
  isDragging = false;
});

// 原有点击切换全屏样式逻辑
btn.addEventListener('click', function() {
  if (!isDragging) { // 拖拽时不触发点击事件
    this.classList.toggle('fullscreen');
  }
});
</script>

内容的提问来源于stack exchange，提问作者Daniel Lip