可以拖动的页面层，使用Javascript实

最新推荐文章于 2023-07-07 15:04:25 发布
最新推荐文章于 2023-07-07 15:04:25 发布
阅读量387 收藏
点赞数
分类专栏： css 文章标签： javascript border function xhtml null html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haoshilu123/article/details/6909730
版权
 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>可拖动层</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;     //当前拖动对象
var relLeft;     //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
     currentMoveObj = obj;         //当对象被按下时，记录该对象
     currentMoveObj.style.position = "absolute";
     relLeft = event.x - currentMoveObj.style.pixelLeft;
     relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
     currentMoveObj = null;     //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
     if(currentMoveObj != null)
     {
         currentMoveObj.style.pixelLeft=event.x-relLeft;
         currentMoveObj.style.pixelTop=event.y-relTop;
     }
}

//-->
</SCRIPT>
</head>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
     <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
     <TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
     <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
     <TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>
</html>


 

haoshilu123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
购物中心
02-16
2. **交互设计**：JavaScript可以为按钮、表单等元素添加各种事件处理，如点击、拖拽等，使用户与页面的交互更加自然流畅。在"购物中心"中，搜索框的自动补全、商品筛选功能、购物车操作等都是JavaScript交互设计的...
lakdatavisualization:湖数据概念网
06-20
8. **交互设计**：通过JavaScript实现的交互功能，用户可以点击节点、拖动元素、展开/折叠子节点等，以探索湖数据架构的层次和关联。 9. **数据可视化最佳实践**：如何有效地传达复杂数据信息，例如颜色编码、图例...
vue elementUi+sortable.js实现嵌套表格拖拽
s1012544671的博客
03-28 3397
首先说下项目需求，一个多层嵌套的表格，行可以进行拖拽排序，但不能跨主级去拖拽，下拉可以异步获取数据，考虑了很久，还是用最熟悉的vue+element来做，但是element没有拖拽排序的功能，所以在此基础上加入sortable.js去实现拖拽功能。 后台返回的排序规则是 每个数据都带有3个属性 id next prev ，用这3个属性实时的去更新排序 id表示这一条数据的id next表示下一条数据的id prev表示上一条数据的id html部分 data部分 flattArray:.
原生Javascript实现表格行上下拖拽
Dreamy_LIN的博客
05-22 3589
拖放事件 拖动元素时，以此触发的事件： dragstart 按下鼠标并移动时触发 drag 拖动期间持续触发 dragend 松开鼠标触发 拖动到有效的放置目标上时，依次触发： dragenter 元素被拖到放置目标上 dragover 被拖元素在放置目标内移动，持续触发 dragleave或drop dragleave，元素被拖到放置目标外触发。drop元素被拖到有效的放置目标上（默认无效），并松开鼠标触发。 实现代码如下： <!DOCTYPE html> <html> &
拖动效果简易制作(demo)
Dickwin的专栏
02-19 1308
拖动的脚本 拖拉jsvar currentMoveObj = null;    //当前拖动对象var relLeft;    //鼠标按下位置相对对象位置var relTop;function f_mdown(obj){    currentMoveObj = obj;        //当对象被按下时，记录该对象    currentMoveObj.style.position = "ab
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
weixin_34055910的博客
11-02 301
前言：前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。博主用了半天时间研究了下，效果是出来了，但是感觉不尽如人意。先把它分享出来，以后想到更好的办法再优化吧。 一、效果展示 1、拖动前   2、拖动中 3、拖动后 4、撤销回到拖动前状态   二、需求分析 通过上篇我们知道...
JS组件系列——Bootstrap Table 表格行拖拽
usench_10000的博客
05-03 204
  原文链接：http://www.cnblogs.com/landeanfen/p/4920894.html   前言：之前一直在研究DDD相关知识，好久没更新JS系列文章了。这两天做了一个简单的业务需求，觉得效果还可以，今天在这里分享给大家，欢迎拍砖~~ 一、业务需求及实现效果 项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是...
TileBoard一个简单但高度可配置的HomeAssistant仪表板
08-10
3. **动态布局**：JavaScript可以动态改变页面元素的位置和样式，以适应不同屏幕尺寸和设备。 **二、CSS相关** CSS（层叠样式表）在TileBoard中起到美化和布局的作用。以下几点展示了CSS在项目中的应用： 1. **...
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章（/C16/） 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 ...
照片墙，图片许愿墙 jquery实现 可来回拖动
11-01
标题中的“照片墙，图片许愿墙 jquery实现 可来回拖动”指的是使用JavaScript库jQuery创建的一个交互式图片展示功能，通常在网页上用于构建一个动态的、用户可以自由拖动的图片展示区域，模拟出类似实体照片墙的效果...
js表格拖拽
12-31
使用纯js完成了table(表格)列的拖拽；同时支持列位置的调整。
JS实现表格行拖动
baodao9862的博客
12-12 164
实现功能： 在Table上实现行的拖动。支持预览 忽略THEAD/TFoot的行 支持的两个函数 if(window.scrollTop==null) { window.scrollTop=f...
使用js实现拖拽功能（附具体实现代码）
热门推荐
笑到根本停不下来的Kathy思的博客
05-24 1万+
js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。 `event.clientX`和`event.clientY`分别是鼠标当前的横坐标和纵坐标，`offsetX` 和 `offsetY` 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的`left`和`top`值。
实现拖拽低代码功能可配置并展示
最新发布
m0_73267676的博客
07-07 827
实现拖拽低代码功能可配置并展示
一文教你如何用JS代码来操作元素拖拽移动的效果
SuBaijiu的博客
11-12 3493
一文教你如何用JS代码来操作元素拖拽移动的效果
拖拽事件(附加代码事例)
zhouzhou20002000的博客
08-31 379
拖放元素:设置当前元素可拖放 draggable=‘true’ 放置元素:默认是不可以放置得 取消默认行为 event.preventDefault() 拖放事件:拖放元素使用 on拖放事件类型 dragstart(开始拖放) drag(正在拖放) dragend(拖放结束) 放置事件:放置元素使用 on放置事件类型 dragenter(进入放置元素) dragover(放置元素内移动) drop(放置在放置元素内) 传输数据:even......
拖拽的实现——JS
mantou_riji的博客
04-08 2472
文章目录拖拽的流程实现div的点击拖拽：==注意==：要想使对象移动一定要对对象开启绝对定位。问题但是对IE8不起作用 拖拽的流程 当鼠标在被拖拽元素上按下时，开始拖拽（onmousedown） 当鼠标移动时被拖拽元素跟随鼠标移动（onmousemove） 当鼠标松开时,被拖拽元素固定在当前位置（onmouseup） 实现div的点击拖拽： 注意：要想使对象移动一定要对对象开启绝对定位。 <!DOCTYPE html> <html lang="zh"> <head>
VXEtable/VXEgrid 表格sorttablejs实现行列表格拖拽功能
wwf1225的博客
11-07 3099
A：因为vxetable对锁定列固定列的做法是多复制一个实例，即两张表，进行的重叠效果。原文链接：https://blog.csdn.net/qq_38149488/article/details/125502964。版权声明：本文为CSDN博主「阿Ruey」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。总结：根据querySelector中的el进行拖拽，有固定列锁定列的情况下需使用tableKey来刷新表格。// 实现showTooltipMethod方法。
原生js实现拖拽功能
weixin_62889848的博客
02-17 650
原生js实现拖拽功能
使用JavaScript写一个可以左右丝滑拖动列宽表格带上样式
05-24
这段代码使用了原生 JavaScript 实现了可左右拖动列宽的表格，并使用 CSS 添加了一些基本的样式。当鼠标按下拖动列宽的时候，通过添加事件监听器处理鼠标移动和抬起事件，并计算出拖动距离来改变列的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值