jsp实现按钮拖拽还要不影响点击?

jsp实现按钮可拖拽 且不影响正常点击 此处有一详细代码

最近在改PC端, 项目不是前后端分离的 要用原生的Jquery去实现 话不多说 上菜 !!! ~

Html

<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/n/css/n.css?v=1">

   <div id="draggableButton" style=" width:72px; height:72px;position: fixed; top: 50px; right: 50px;/*  background-color: #4CAF50; */ color: white;/*  padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border: none; border-radius: 154px; cursor: pointer;">
    <img id="imagebtn" style="width:72px;" src="<%=sWebRootPath%>/qianxun/images/qian_logo.png" alt="千寻ai助手" />
   </div>

Script

<script type="text/javascript">
var draggableButton = document.getElementById('draggableButton');
var isDragging = false;
var startTime;
var endTime;
var pos1 = 0,
  pos2 = 0,
  pos3 = 0,
  pos4 = 0;
var clickTimeout;
var moveDistance = 0;

draggableButton.onmousedown = dragMouseDown;

function dragMouseDown(e) {
  e = e || window.event;
  e.preventDefault();
  isDragging = false;
  startTime = new Date().getTime();
  pos3 = e.clientX;
  pos4 = e.clientY;
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
}

function elementDrag(e) {
  e = e || window.event;
  e.preventDefault();
  if (!isDragging) {
    moveDistance = Math.sqrt((pos3 - e.clientX) ** 2 + (pos4 - e.clientY) ** 2);
    if (moveDistance > 5) {
      isDragging = true;
    }
  }
  if (isDragging) {
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    draggableButton.style.top = (draggableButton.offsetTop - pos2) + "px";
    draggableButton.style.left = (draggableButton.offsetLeft - pos1) + "px";
  }
}

function closeDragElement() {
  endTime = new Date().getTime();
  isDragging = false;
  document.onmouseup = null;
  document.onmousemove = null;
  // 设置一个短暂的延迟,在这段时间内点击视为误触
  clearTimeout(clickTimeout);
  if (moveDistance > 5 || endTime - startTime < 100) {
    clickTimeout = setTimeout(() => {
      moveDistance = 0;
    }, 200);
  } else {
    // 如果是点击事件
    /* alert('按钮被点击了!'); */
    var screenWidth = $(document).width();
    // 计算新窗口的左边界,使其右对齐
    var left = screenWidth - 400;
    // 获取屏幕高度
    var screenHeight = $(document).height();
    // 设置窗口特性字符串
    var windowFeatures = 'width=500,height='+screenHeight+',left='+left+',top=0';
    // 打开新窗口
    window.open('', '_blank', windowFeatures);
  }
}

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值