说明:
在作网页时,有时想允许用户拖动一个标签,此时用第三方UI组件库是个不错的注意。如果想自已写如何写呢?自已只想写一次,以后都可用,又如何做呢?
下面中的源代码实现了这个想法。在firefox表现特好,在ie6下可以拖动,google的还没测试。
下面的代码中,FDrag类是核心的代码。对外界来说,仅有一个add方法。如果用户想让哪个标签可以拖动,只需把该标签的id名通过add方法传进去即可。
例:下面id为xxx,yyy的div标签可以拖动。
<<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<title> 拖动对象 Drag Object (兼容:IE、Firefox、 ... )</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
function FDrag(){
this.ie=document.all;
this.nn6=document.getElementById&&!document.all;
this.isdrag=false;
this.x;
this.y;
this.oDragObj;
this.nTX;
this.nTY;
this.list = new Array();
this.listTarg=new Array();
this.add=function (divID){
this.list.push(divID);//var d=list.pop();
var d=document.getElementById(divID);
this.listTarg.push(d);
d.style.position="relative";
d.style.cursor="move";
d.onmousedown=(function(v) {
return function() {
v.initDrag(v,arguments[0]);// arguments装着鼠标事件
};
}) (this);
d.onmouseup=(function(v) {
return function() {
v.isdrag=false;
};
}) (this);
d.onmousemove=(function(v) {
return function() {
v.moveMouse(v,arguments[0]); //arguments装着鼠标事件
};
}) (this);
}
this.moveMouse=function (o,e) {
if (o.isdrag) {
o.oDragObj.style.top = (o.nn6 ? o.nTY + e.clientY - o.y : o.nTY + event.clientY - o.y)+"px";
o.oDragObj.style.left = (o.nn6 ? o.nTX + e.clientX - o.x : o.nTX + event.clientX - o.x)+"px";
return false;
}
}
this.initDrag=function (o,e) {
var oDragHandle =o.nn6 ? e.target : event.srcElement;
var isExist=false;
for (var i=0 ; i<this.list.length;i++){
if (this.list[i]==oDragHandle.id){
isExist=true;
break;
}
}
if(isExist){
o.isdrag = true;
o.oDragObj = oDragHandle;
o.nTY = parseInt(o.oDragObj.style.top+0);
o.y = o.nn6 ? e.clientY : event.clientY;
o.nTX = parseInt(o.oDragObj.style.left+0);
o.x = o.nn6 ? e.clientX : event.clientX;
return false;
}
}
}
</script>
</head>
<body>
<div id="xxx" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;">xxx11
<div id="zzz" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;">zzz11</div>
</div>
<div id="yyy" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;"
>yyy11</div>
<script language="javascript">
var f=new FDrag ();
f.add("xxx");
f.add("yyy");
</script>
</body>
</html>
分享到:
相关推荐
一个基于Vue.js的可拖拽可分析树级组件。兼容Chrome,Firefox,IE Edge
创建有用的可拖动通用组件以创建自定义图形桌面应用程序,例如可视化编辑器或多媒体管理
<br>操作一致性:向日葵甘特图组件的操作与MS Project极为相似,在Web上实现了拖动甘特条调整任务进度、调整任务工期、建立任务链接关系等精细操作。 <br>数据一致性:可以直接读取MS Project(版本在2000...
实现功能有,拖拽、合并文件、换位置
vuex: 状态管理 sass: css预编译器。 element-ui:不造轮子,有现成的优秀的vue组件库当然要用起来。没有的自己再封装一些就可以了。 loadsh:工具类 服务端: koa:后端语言采用nodejs,koa文档和学习资料也比较多...
Doc文件管理系统仿百度网盘源代码使用vue+elementUI实现文件下钻功能,类似百度网盘功能,hover显示下载
easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。支持拖拽添加节点。点击线进行设置条件。支持给定数据加载流程图。支持画布拖拽。支持连线样式、锚点、类型自定义覆盖。...
Dreamweaver(拖拽图形设计自动生成代码),中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发,2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、...
没有选定的状态管理-与[React Drag to Select]( ,如果选择了某个项目,则不会管理此组件。这取决于您来处理。只有当项目变为选中触发钩。 支持深度嵌套的项-与[React Drag to Select]( ,您尝试选择的项不必是父...
一个通过可视化拖拽组件的方式来生成VUE GUI原型界面,源码!
ThinkPHP小程序版行业运营管理系统源码下载 一键生成小程序 全行业通用运营管理系统,ThinkPHP内核小程序源码 可自由DIY布局,自带一键生成小程序功能,内附安装说明 无需编程,各行业模版直接套用,一键生成,轻松...
用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意:您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :...
ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序,内附安装说明 无需编程,各行业模版直接套用,一键生成,轻松搭建小程序 界面自由DIY,打造个性小程序 可拖拽式DIY布局,开启自定义功能新...
内置的基础功能包括数据源,数据集,报表管理。 多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。 三步轻松完成大屏...
可拖拽式DIY布局,开启自定义功能新征程,无需繁琐操作,轻松拖拽即可实现界面布局;同步实时预览,可视化操作让您所见即所得,随心打造个性小程序。 丰富功能组件,应多种场景需求 多样的功能组件,不受行业框架...
基于TypeScript+React拖动配置大屏的后台管理系统源码+项目部署操作说明.zip 1、该资源内项目代码都是经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、...
本项目提供的是一个Android ListView组件,它允许用户以任意方式拖动列表项。这个功能为应用程序提供了高度的交互性和可定制性,使得用户可以根据自己的需求和喜好来重新排列列表。 该ListView组件基于Android的...
v-dialog-drag: Dialog 组件拖拽任意位置 v-dialog-drag-width: Dialog 组件拖拽宽度 v-dialog-corner: Dialog 组件右下角拖拽宽度高度 v-clipboard: 剪切板指令,类似 复制、Ctrl + C等复制文本至剪切板 提供原型...
一个个人文件管理系统的源码脚手架,r-pan基于此脚手架搭建,版本更新内容(更换了前端上传组件,新增了断点续传、暂停继续上传、拖拽上传等功能;优化了上传任务面板UI,新增了上传速度、剩余时间等监控信息的显示...
泽元网站内容管理系统 (简称ZCMS) 是一套基于J2EE和插件技术的、面向高端用户的网站内容管理软件,集内容规划、内容创作、内容编辑、内容审核、基于模板的内容发布等功能于一身,并提供互动组件、可视化专题、内容...