html拖拽页面特效,div+css实现网页模块或栏目拖动(即拖拽效果)

article/2025/9/14 7:44:29

//为Number增加一个属性,判断当前数据类型是否是数字

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

//全局变量

var iMouseDown=false;

var dragObject=null;

//获得鼠标的偏移量(对象2-对象1)

function getMouseOffset(target,ev)

{

ev=ev||window.event;

var docPos=getPosition(target);

var mousePos=mouseCoords(ev);

return {x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};

}

//获得事件发生的实际位置----------------------对象1

function getPosition(e)

{

var left=0;

var top=0;

//相对位置累加得到实际位置

while(e.offsetParent)

{

left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

e=e.offsetParent;

}

left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left,y:top};

}

//获得发生事件鼠标的位置----------------------对象2

function mouseCoords(ev)

{

if(ev.pageX||ev.pageY)

{

return {x:ev.pageX,y:ev.pageY};

}

return {x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,y:ev.clientY+document.body.scrollTop-document.body.clientTop};

}

//定义可以拖拽的对象

function makeDragable(item)

{

if(!item) return;

//为可拖拽对象定义一个onmousedown事件的方法

ev=window.event;

item.οnmοusedοwn=function(ev)

{

dragObject=this;

mouseOffset=getMouseOffset(this,ev);

return false;

}

}

//定义鼠标点下所调用的方法

function mouseDown(ev)

{

ev=ev||window.event;

var target=ev.target||ev.srcElement;

if(target.onmousedown||target.getAttribute('DragObj'))

{

return false;

}

}

//鼠标抬起后释放对象

function mouseUp(ev)

{

dragObject = null;

//onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false

iMouseDown = false;

}

//鼠标移动

function mouseMove(ev)

{

ev=ev||window.event;

var target   = ev.target || ev.srcElement;

var mousePos = mouseCoords(ev);

if(dragObject)

{

if(dragObject.style)

{

//移动对象

dragObject.style.left=mousePos.x - mouseOffset.x;

dragObject.style.top= mousePos.y - mouseOffset.y;

}

}

//lMouseState = iMouseDown;

if(dragObject) return false;

}

document.οnmοusedοwn=mouseDown;

document.οnmοusemοve=mouseMove;

document.οnmοuseup=mouseUp;

function moveImg()

{

var img1=document.getElementById('img1');

makeDragable(img1);

}

   


http://chatgpt.dhexx.cn/article/08SCWKvZ.shtml

相关文章

RecyclerView实现Item可拖拽(拖动、删除)

RecyclerView实现Item可拖拽(拖动、删除) 话不多说,先附上效果图: ItemTouchHelper 这是一个RecyclerView的工具,提供了drag & swipe 的功能,可以帮助我们处理RecyclerView中的Item的拖拽和滑动事件…

原生drag拖拽后元素过大,挡住其他可拖动位置无法拖动问题

写一个蒙层,还未拖动前原始层在上面, 拖动那过程中(dragover)原始层在下面, 拖进目标元素后(drop),此时蒙层在上面,根据drop的$event获取落在蒙层哪个div上&#xff0c…

html5播放器禁止拖拽功能实例(教学内容禁止拖动观看)

html5播放器禁止拖拽功能实例&#xff08;常用于场景&#xff1a;企业培训、在线教学内容禁止学员拖动视频进行观看&#xff09; 实例1&#xff1a;参数开启后&#xff0c;视频教学内容或视频课件将不允许拖动进度条。 <div id"player"></div> <scr…

html5播放器禁止拖拽、视频禁止拖动的实例

阿酷TONY / 2023-3-8 / 长沙 html5播放器禁止拖拽功能,常用于场景&#xff1a;企业培训、在线教学内容禁止学员拖动视频进行观看。 应用代码实例&#xff1a; <div id"player"></div> <script src"//player.polyv.net/script/player.js">…

WPF TreeView拖动排序拖拽排列

底部附有Demo示例。需要的朋友可以去下载参考 一、图示 先上图&#xff0c;不知为啥&#xff0c;GIF总看起来特别卡&#xff0c;实际却很流畅。 由于录制问题&#xff0c;GIF动画只会播放一次&#xff0c;需要重复观看的&#xff0c;请将网页关闭后重新打开再观看 WPF的资料…

js原生拖拽的两种方法

一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽&#xff0c;那么必须使用三个事件&#xff0c;并且这三个事件的使用顺序不能颠倒。 1.onmousedown&#xff1a;鼠标按下事件 2.onmousemove&#xff1a;鼠标移动事件 3.onmouseup&#xff…

前端原生拖拽(drag drop)的一点小总结

新工作中&#xff0c;第一个手生的功能&#xff0c;遇到了很多诡异的问题&#xff0c;今天终于解惑了。最终原因还是对代码没有透彻的了解&#xff0c;jquery的运用也不熟练导致的。稍稍的记录一下。 原始功能 对项目列表中的元素进行拖拽&#xff0c;拖拽到一定的位置&#xf…

Vue2 _ 实现拖拽功能

老项目重构&#xff0c;其中有一些拖拽功能&#xff0c;不过用的是两个开源 JS 拖拽文件实现的效果&#xff0c;版本太老了&#xff0c;所以需要换代了&#xff0c;然后就查阅了能够用 Vue 来简单快速实现拖拽的功能实现方法 &#xff1a; 目录 一、HTML 拖放 二、Vue.Dragg…

vue2 使用 Sortable 库进行拖拽操作

一、vue 项目使用 文档地址&#xff1a; https://www.itxst.com/sortablejs/neuinffi.html 1、安装依赖 npm i -S vuedraggable2、.vue 文件引入组件 import draggable from "vuedraggable"; components: { draggable },3、.使用 查看文档中的示例即可&#xff…

空指针、悬空指针、野指针

文章目录 前言一、指针&#xff1f;二、指针的应用场景三、 空指针四、 悬空指针五、 野指针正确用法 总结 前言 相信很多小伙伴对指针的使用都有一定的了解了。但更多的人可能对指针又爱又恨。这次我们谈点重要的&#xff0c;进一步加深对指针的理解 一、指针&#xff1f; 指…

【C语言】指针(野指针)

目录 1&#xff1a;什么是野指针&#xff1f; 2&#xff1a;如何规避野指针 1.1&#xff1a;指针变量的初始化 2.2&#xff1a;指针越界访问 3.3&#xff1a;指针指向的空间如果我们还回去的话&#xff0c;就把指针指针置为NULL 4.4&#xff1a;指针使用之前检查有效性…

C语言的野指针

1.野指针 指针变量中的值是非法的内存地址&#xff0c;进而形成野指针野指针不是NULL指针&#xff0c;是指向不可用内存地址的指针NULL指针并无危害&#xff0c;很好判断&#xff0c;也很好调试C语言中无法判断一个指针所保存的地址是否合法&#xff0c;合法的地址是通过变量或…

初识C语言---野指针

野指针概念&#xff1a; 野指针就是指针指向的位置是不可知的&#xff08;随机的、不正确的、没有明确限制的&#xff09;。 一、野指针成因 1、指针未初始化就使用 #include<stdio.h> int main() {int* p; *p 10; return 0; }此段代码中&#…

野指针(概念,产生原因,危害,避免方法)

思维导图: 1.野指针与垂悬指针的区别: 野指针:访问一个已销毁或者访问受限的内存区域的指针,野指针不能判断是否为NULL来避免 垂悬指针:指针正常初始化,曾指向一个对象,该对象被销毁了,但是指针未制空,那么就成了悬空指针。 2.概念 指针指向了一块随机的空间,不受…

野指针概念、定义、及如何规避野指针

野指针 野指针的概念&#xff1a; 野指针就是指针指向的位置不可知的。&#xff08;随机的、不正确的、没有明确限制的&#xff09; 野指针的三种情况 1、指针未定义 #include <stdio.h> int main() {int* p; //局部变量指针未初始化&#xff0c;默认就是随机值*p10;r…

使用 OKTA 作为 SAML IdP 为 FortiClient配置 SAML SSO 登录

描述 随着用于 FortiGate 和 FortiClient 6.4 的 FortiOS 6.4 的发布,现在可以创建SSL SSO 单点登录解决方案,该解决方案可以集成第三方 SAML SSO 身份提供商 (IdP) 并利用其 MFA 功能。 前置条件 FortiGate 运行 FortiOS 6.4.0 或更高版本FortiClient 6.4.0 或更高版本OK…

SAML 流程讲解

SAML&#xff08;Security Assert Mark Language&#xff09;常用来实现SSO。 本文主要梳理一下SAML的代码逻辑 术语讲解&#xff1a; IDP: Identity provider 在单点登陆中是指统一身份认证平台。 SP&#xff1a;Service Provider 在单点登陆中是指需要被认证的服务方。 A…

SAML单点登录-spring-security-saml 整合使用

本文链接&#xff1a;http://t.csdn.cn/BIGKc SAML单点登录-spring-security-saml客户端SP 使用spring-security-saml搭建SAML协议的客户端&#xff0c;该依赖是spring框架的官方库&#xff0c;配置方便、文档详细。提供了包括单点登录、单点登出、获取sq元数据文件等接口&…

盘点认证协议 : 普及篇之SAML

首先分享之前的所有文章 , 欢迎点赞收藏转发三连下次一定 >>>> &#x1f61c;&#x1f61c;&#x1f61c; 文章合集 : &#x1f381; https://juejin.cn/post/6941642435189538824 Github : &#x1f449; https://github.com/black-ant CASE 备份 : &#x1f449…

SAML2.0 笔记(二)

文章目录 零、示例代码参考一、前言二、共通内容1.1、引入依赖1.2、初始化SAML部分1.2.1、检查JCE环境1.2.2、初始化服务 1.3、拦截器部分1.3.1、构建AuthnRequest1.3.2、AuthRequest解析1.3.3、SP模式选择1.3.4、IDP模式选择 1.4、涉及的工具类1.4.1、OpenSAMLUtils工具类1.4.…