拖拽元素自定义html模板,JS实现的自定义网页拖动类
本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考,具体如下:
先来看运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
自写的拖动类……
var d=document;//给document对象一个通用的事件侦听方法
d.addListener=function(e,f,b){
this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
}
d.removeListener=function(e,f,b){
this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
}
function $(){//接收一个id参数,返回带有startDrag方法的对象
var o=document.getElementById(arguments[0]);
o.addListener=function(e,f,b){
this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
}
o.removeListener=function(e,f,b){
this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
}
o.startDrag=function(obj){//参数obj默认为o本身,可以传其它参数以确定要移动的对象
var obj=obj?obj:o;
var sx,sy;
o.style.cursor="move";
o.addListener("mousedown",function(e){
e||event;
if(e.button==1||e.button==0){
sx=e.clientX-obj.offsetLeft;sy=e.clientY-obj.offsetTop;
d.addListener("mousemove",move,false);
d.addListener("mouseup",stopDrag,false);
}
},false);
var stopDrag=function(){
d.removeListener("mousemove",move,false);
d.removeListener("mouseup",stopDrag,false);
}
var move=function(e){
e||event;
window.getSelection ? window.getSelection().removeAllRanges() :
document.selection.empty();
if(e.preventDefault)e.preventDefault();//这两句便是解决firefox拖动问题的.
with (obj.style){
position="absolute"
left=e.clientX-sx+"px";
top=e.clientY-sy+"px";
}
}
}
return o;
}
window.οnlοad=function(){$("ok").startDrag($("os"))}//本例中拖动ok元素,移动其父元素
*{margin:0;padding:0}
#ok{width:215px;height:170px;background:url(images/sample1.gif)}
#os{width:400px;height:300px;background:#09f;left:300px}
#os2{width:400px;height:300px;background:#f90;}
希望本文所述对大家JavaScript程序设计有所帮助。
拖拽元素自定义html模板,JS实现的自定义网页拖动类相关推荐
- html元素拖动互换位置原理,【详】JS实现拖拽元素互换位置
写在前面的废话 大家好,我是练习js时长接近两年半的个人练习生--李大雷 算了,直接 鸡,你太美~ 应用场景 很多时候,我们需要让用户来自定义自己想要的菜单顺序,或者一些按钮的排序,那么这个时候,怎么 ...
- js 拖拽元素 鼠标速度过快问题
自己写一个小工具,使用js拖拽元素时,鼠标速度过快时 元素跟不上鼠标 看网上有人说把mousemove事件绑定到dom上 试了不管用 偶然发现拖拽文字丝毫无卡顿 不知道是不是元素比较复杂的缘故? s ...
- js 拖拽元素 鼠标速度过快元素跟不上
自己写一个拖拽元素,使用js拖拽元素时,鼠标速度过快时 元素跟不上鼠标 参考了网上的文章 ,里面对比了绑定到 body和document上的不同点js 拖拽元素 鼠标速度过快问题 明白过来是因为速度过 ...
- JQuery 拖拽元素,并移动其他元素位置
JQuery 拖拽元素,并移动其他元素位置 <!DOCTYPE html> <html> <head><meta charset="UTF-8&qu ...
- vue 拖拽元素到任意位置
vue 拖拽元素到任意位置 使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
- 【记】Vue - 拖拽元素组件实现
需求描述: 1.可实现PC/移动端元素拖拽移动 2.支持2种模式:1.元素跟随光标点放置2.元素在光标点平齐位置靠侧边吸附 市面上估计有很多这种组件和功能了,但我没找到合适的,用了VueUse的use ...
- fullcalendar实现拖拽方案到日历中--js
fullcalendar实现拖拽方案到日历中 js代码. var form; var planid; var planname; var date; var html = ""; ...
- js拖拽元素到另一个元素_js控制浏览器滚动条到制定元素
最近在使用selenium抓取数据,但是需要使用js控制滚动条来加载数据.主要是不会js,不会直接使用js来加载数据. 这里就使用笨方法,控制滚动条滚动到制定元素来加载数据. 版本1:下拉滚动条 最开 ...
- 原生js实现拖拽与缩放等包含js设置样式与五子棋等
最近写五子棋,写着写着,写了几个js特效,感觉还行,发出来分享一下.具体还在调试,如果有alert弹窗部分,大家自己找一下取消掉.我记得缩放的四个边角红色背景色没有去掉,嫌碍事的可以把"ba ...
最新文章
- Guava Cache本地缓存在 Spring Boot应用中的实践
- 青少年计算机学奥林匹克大赛,2019年第36届全国青少年信息学奥林匹克竞赛获奖规则...
- 用python进行营销分析_用python进行covid 19分析
- STL vector用法介绍
- c语言打开文件出现分段故障,C文件I / O中的分段故障11(Segmentation Fault 11 in C File I/O)...
- 【TWVRP】基于matlab蚁群算法求解带时间窗的多中心车辆路径规划问题【含Matlab源码 112期】
- windowns server 2008 R2激活工具(含win7、vista)
- 二叉树的前中后序遍历的非递归形式【Java】
- Linux下安装vmWare tools工具(详细讲解)
- Nmap局域网主机存活发现
- Android自定ViewGroup实现流式布局
- C语言:寻找重复数字
- 液晶屏LED背光板可以分为几类?
- html标签不使用css样式,html – 忽略CSS样式
- linux 函数中打印调用栈
- 机器人编程学的是什么
- 安卓手机使用Termux软件进行Linux系统的安装
- 零基础学习ORB-SLAM2特征点提取-从原理到源码【李哈哈】
- HTML5、CSS3进阶——字体图标、平面转换
- 淘宝商品比价定向爬虫-Python网络爬虫与信息提取-北京理工大学嵩天教授
热门文章
- 通过wsdl2java工具生成客户端段代码(wsdl2java -p cn.com.css.misps.graph.webservice.impl -d F:\src -all http://10.)
- Oracle创建用户,创建表空间,将空间分配给用户,给用户授权
- 窗口分析函数_5_计算累加乘
- mysql5.6视频_网易视频云:MySQL 5.6 5.7最优配置文件模板
- 远程服务器概念,远程服务
- NC88-寻找第K大的数
- 算法练习:将字符串中所有的空格替换为'%20'(只用基本数据结构)
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月2日-4月8日)
- CMMI入门 - 由来与思路
- ASP.NET页面刷新办法