javascript写的mousedown、mousemove、mouseup组合定义的拖动事件在手...

发布网友发布时间：2022-04-26 15:15

共5个回答

懂视网时间：2022-05-16 03:23

javascript简单拖拽

简单拖拽实现

mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。

简单拖拽实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖拽实现</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; }
#dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;}
</style> 
</head>
<body>
<div id="box">
 <div id="dragBox">拖我</div>
</div>
<script type="text/javascript">
var VVG = {}; //命名空间
VVG.DOM = {
 $: function(id) { //创建方便的选择符
 return typeof id == "string" ? document.getElementById(id) : id;
 },
 bindEvent: function(node, type, func) { //事件绑定方法
 if (node.addEventListener) {
  node.addEventListener(type, func, false);
 } else if (node.attachEvent) {
  node.attachEvent("on" + type, func);
 } else {
  node["on" + type] = func;
 }
 },
 getEvent: function(event) { //获取事件
 return event ? event : window.event;
 },
 getTarget: function(event) { //获取事件目标
 return event.target || event.srcElement;
 }
}
 var DragDrop = function() { //新建一个返回对象的函数
 var box = VVG.DOM.$("box"); //获取外围BOX
 var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX
 var dragging = null; //初始化对象
 function drag(event) { //事件执行函数
  event = VVG.DOM.getEvent(event); 
  var target = VVG.DOM.getTarget(event);
  switch (event.type) {//判断事件类型
  case "mousedown":
  if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时
   dragging = target; //赋值到拖动目标
  }
  break;
  case "mousemove":
  if(dragging){ //当有拖动目标时执行
   sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
   dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px";
   dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight/2 ) + "px";
   var left = parseInt(dragging.style.left);
   var top = parseInt(dragging.style.top);
   //console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
   // 比较坐标是否超出外围的BOX
   if(left < 0){
   dragging.style.left = 0 +"px";
   }
   if(top < 0){
   dragging.style.top = 0+"px";
   }
   if(left > box.offsetWidth - dragBox.offsetWidth){
   dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px";
   }
   if(top > box.offsetHeight - dragBox.offsetHeight){
   dragging.style.top =( box.offsetHeight - dragBox.offsetHeight - 2 )+"px";
   }
  }
  break;
  case "mouseup":
  // 清空拖动目标
  dragging = null;
  break;
  }
 };
 return {
  dragStart: function() {
  // 绑定事件
  VVG.DOM.bindEvent(document, "mousedown", drag);
  VVG.DOM.bindEvent(document, "mousemove", drag);
  VVG.DOM.bindEvent(document, "mouseup", drag);
  }
 }
 }();
 DragDrop.dragStart();
</script>
</body>
</html>

热心网友时间：2022-05-16 00:31

可以使用像Hammer.js这样的框架

热心网友时间：2022-05-16 01:49

手机上用 touchstart,touchmove,touchend

热心网友时间：2022-05-16 03:24

mouse是鼠标的，touch才行，在手机上用touch

热心网友时间：2022-05-16 07:23

可以使用touchstart、touchend、touchmove代替，具体怎么使用可以自己查一下