js拖拽功能的实现,js怎么实现拖拽

js拖拽功能的实现,js怎么实现拖拽,js实现简单的拖拽效果

本文主要详细介绍js的简单拖拽效果。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享js实现简单拖拽效果的具体代码,供大家参考。具体内容如下

1.拖拽的基本效果

思路:

当鼠标按在框上时,准备移动(事件添加到对象)

当鼠标移动时,框随鼠标移动(事件被添加到页面)

当鼠标抬起时,框停止移动(事件被添加到页面中)

var o=document . query selector(' div ');

//鼠标按下

o.onmousedown=function (e) {

//鼠标相对于框的位置

var offsetX=e . clientx-o . offset left;

var offsetY=e . clienty-o . offsettop。

//鼠标移动

document . onmousemove=function(e){

o . style . left=e . clientx-offsetX ' px ';

o . style . top=e . clienty-offsetY ' px ';

}

//鼠标抬起

document.onmouseup=function () {

document.onmousemove=null

document.onmouseup=null

}

}

2.拖拽的问题

如果框中有文字,或者框本身是图片,由于浏览器的默认行为(文字和图片本身可以拖拽),我们可以设置return false来阻止其默认行为,但是这种默认的拦截行为在IE的下版本中并不适用,可以使用全局捕捉来解决IE的问题。

全局捕获

全局捕获仅适用于IE版本较低的浏览器。

button btn1/按钮

button BTN 2/按钮

脚本

var BTS=document . query selector all(' button ')

bts[0]。onclick=function () {

console . log(1);

}

bts[1]。onclick=function () {

console . log(2);

}

//bts[0]。setCapture() //添加全局捕获

//bts[0]。releaseCapture()。//释放全局捕获

/脚本

一旦为指定节点添加了全局捕获,页面中的其他元素将不会触发相同类型的事件。

3.完整版的拖拽

var o=document . query selector(' div ');

//鼠标按下

o.onmousedown=function (e) {

低版本if (o.setCapture) {//IE

o.setCapture()

}

e=e || window.event

//鼠标相对于框的位置

var offsetX=e . clientx-o . offset left;

var offsetY=e . clienty-o . offsettop。

//鼠标移动

document . onmousemove=function(e){

e=e || window.event

o . style . left=e . clientx-offsetX ' px ';

o . style . top=e . clienty-offsetY ' px ';

}

//鼠标抬起

document.onmouseup=function () {

document.onmousemove=null

document.onmouseup=null

if (o.releaseCapture) {

o . release capture();//释放全局捕获

}

}

返回false//标准浏览器的默认行为

}

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • js怎么样把日期转化为时间戳,js中时间戳转换日期格式
  • js怎么样把日期转化为时间戳,js中时间戳转换日期格式,js时间戳与日期格式之间相互转换
  • js怎么实现轮播图效果,js实现轮播图原理及示例
  • js弹窗倒计时10秒代码,js怎么做倒计时60秒
  • js弹窗倒计时10秒代码,js怎么做倒计时60秒,js代码实现点击按钮出现60秒倒计时
  • js怎么给input框赋值,jquery给输入框赋值
  • js怎么插图片,在jsp页面中导入图片
  • list集合的遍历方式有哪几种,js怎么遍历list集合
  • jquery去掉class属性,js怎么移除class
  • js怎么定义空数组,java如何创建空数组
  • js删除指定元素,js怎么删除对象中的某个元素
  • js怎么往数组添加元素,js给数组添加方法
  • js怎么删除,javascript删除文件
  • js怎么删除,javascript删除文件_1
  • js怎么知道点击的是哪个元素,jquery找到指定元素的第一个元素
  • 留言与评论(共有 条评论)
       
    验证码: