当前位置: 首页 > 编程笔记 >

分享一个原生的JavaScript拖动方法

左丘嘉言
2023-03-14
本文向大家介绍分享一个原生的JavaScript拖动方法,包括了分享一个原生的JavaScript拖动方法的使用技巧和注意事项,需要的朋友参考一下

代码:

function drag(t,p){

  var point = p || null,
    target = t || null,
    resultX = 0,
    resultY = 0;

  (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素

  function getPos(t){
    var offsetLeft = 0,
      offsetTop = 0,
      offsetParent = t;

    while(offsetParent){
      offsetLeft+=offsetParent.offsetLeft;
      offsetTop+=offsetParent.offsetTop;
      offsetParent = offsetParent.offsetParent;
    }

    return {'top':offsetTop,'left':offsetLeft};
  }

  function core(){

    var width = document.body.clientWidth || document.documentElement.clientWidth,
      height = document.body.clientHeight || document.documentElement.clientHeight; 
      maxWidth = width - target.offsetWidth,
      maxHeight = height - target.offsetHeight;

    (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。
    (resultY >= maxHeight)?  target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。

    point.onmousedown=function(e){  
      var e = e || window.event,
        coordX = e.clientX,
        coordY = e.clientY,
        posX = getPos(target).left,
        posY = getPos(target).top;

      point.setCapture && point.setCapture();  //将Mouse事件锁定到指定元素上。
      document.onmousemove=function(e){

        var ev = e || window.event,
          moveX = ev.clientX,
          moveY = ev.clientY;

        resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
        resultY = moveY - (coordY - posY);

        (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px'; 
        (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 

        ev.stopPropagation && ev.stopPropagation(); 
        ev.preventDefault;
        ev.returnValue = false;
        ev.cancelBubble = true;
      };
    };
    document.onmouseup=function(){  // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。
      document.onmousemove = null;  
      point.releaseCapture && point.releaseCapture();  // 将Mouse事件从指定元素上移除。
    };
    point.onmouseup=function(e){
      var e = e || window.event;
      document.onmousemove = null;
      point.releaseCapture && point.releaseCapture();
    };
  }
  core();
  window.onresize = core;  
}

使用方式:

 drag(t,p)
 /* 
 * 说明 
 * t 表示被拖动的元素
 * p 表示拖动点
 */
 
 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
 类似资料:
  • 本文向大家介绍javascript实现行拖动的方法,包括了javascript实现行拖动的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍javascript常用的方法分享,包括了javascript常用的方法分享的使用技巧和注意事项,需要的朋友参考一下 针对现在大家平时开发中,都会写一些重复性的js处理代码,今天总结了几个比较常用的方法实现。获取get请求参数、去字符串空格。 1、获取get请求中的参数 Js代码  2、 //本函数用于去掉字符串左边的空格  Js代码  3、 //本函数用于去掉字符串右边的空格  J

  • 最早在网页中引入JavaScript 拖放功能的是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它。拖动文本时,要先选中文本,然后可以像拖动图像一样拖动被选中的文本。在IE 4 中,唯一有效的放置目标是文本框。到了IE5,拖放功能得到扩展,添加了新的事件,而且几乎网页中的任何元素都可以作为放置目标。IE5.5 更进一步,让网页中的任何

  • 本文向大家介绍分享一个常用的javascript静态类,包括了分享一个常用的javascript静态类的使用技巧和注意事项,需要的朋友参考一下 废话不多说,直接奉上代码,知道干啥用的小伙伴直接带走吧。 是不是相当不错呢,反正我是很满意。

  • 原生拖放 拖放,将一个元素从一个位置拖放到另一个位置。最有意思的就是在框架间、应用间、窗口拖放网页元素。 拖放事件 拖放事件的关键在于 是确定在什么地方发生了拖放事件,有的事件是发生在被拖放的元素上,有的事件是发生在放置目标上。 拖动某元素时,会发生以下事件: 1、dragstart 2、drag 3、dragend 按下鼠标并开始托动鼠标时,会在被拖动元素上触发dragstart事件,这时鼠标会

  • 本文向大家介绍javascript实现炫酷的拖动分页,包括了javascript实现炫酷的拖动分页的使用技巧和注意事项,需要的朋友参考一下 javascript实现炫酷的拖动分页 js html: 以上所述就是本文的全部内容了,希望大家能够喜欢。