可拖动的div

最新推荐文章于 2022-05-07 18:52:09 发布
最新推荐文章于 2022-05-07 18:52:09 发布
阅读量1k 收藏
点赞数
分类专栏： js/jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Learner9023/article/details/8222467
版权 
<!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="gb2312"> 
<head> 
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="editor" content="枫岩,http://www.cnlei.com"> 
<meta name="keywords" content="代码实例：拖动对象"> 
<meta name="description" content="最简短的拖动对象代码实例演示"> 
<style> 
.dragAble {position:relative;cursor:move;} 
</style> 
<script language="javascript"> 
<!-- 
// Author:  Unkonw 
// Modify:  枫岩@CnLei.com 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var isdrag=false; 
var y,x; 
var oDragObj; 

function moveMouse(e) { 
if (isdrag) { 
oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; 
oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; 
return false; 
} 
} 

function initDrag(e) { 
var oDragHandle = nn6 ? e.target : event.srcElement; 
var topElement = "HTML"; 
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { 
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; 
} 
if (oDragHandle.className=="dragAble") { 
isdrag = true; 
oDragObj = oDragHandle; 
nTY = parseInt(oDragObj.style.top+0); 
y = nn6 ? e.clientY : event.clientY; 
nTX = parseInt(oDragObj.style.left+0); 
x = nn6 ? e.clientX : event.clientX; 
document.οnmοusemοve=moveMouse; 
return false; 
} 
} 
document.οnmοusedοwn=initDrag; 
document.οnmοuseup=new Function("isdrag=false"); 
//--> 
</script> 
</head> 
<body> 
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /> 
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /> 
<img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" /><br /><br /> 
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div> 
</body> 
</html>


 

尐尐尐欢欢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可拖动的DIV
u013861109的博客
10-23 1241
可拖动的DIV
bootstrap拖动div_使用bootstrap实现多窗口和拖动效果
weixin_39778003的博客
12-22 666
有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！这里，我们不使用静态打开的的方式，low...,1、添加一个a链接 触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'...
可拖动DIV层的实现方法
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
html div整体移动,可拖动div大小改变.html
weixin_42311530的博客
06-01 746
* {margin: 0;padding: 0}.boxTest {width: 300px;height: 300px;position: absolute;top: 100px;left: 100px;background: red;}/*四边*//* .boxTest .t,.boxTest .b,.boxTest .l,.boxTest .r {position: absolute;z-i...
弹出可拖动div层提示窗口
paopao_2017的博客
01-12 1650
DIVCSS5可拖动DIV提示窗口 function alertWin(title, msg, w, h){ var titleheight = "22px"; // 提示窗口标题高度 var bordercolor = "#666699"; // 提示窗口的边框颜色 var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色 var titlebgcolor
js实现可拖动div
开发路上的AZhe
05-30 627
var oipc=document.getElementById('avatar');//得到需要拖动的div var isDrag=false;//是否开始拖拽 false 不拖拽 var disX,disY;//图片相对于图片的位置 //鼠标按下时 oipc.onmousedown=function(e){ isDrag=true;//开启拖拽 this.style.cursor='move'; //光标表...
Jquery实现拖动Div
小陈的博客
05-07 1223
代码如下： @model Ranwei.Web.OMS.Areas.Project.Models.ProjectTask.ProjectTaskModel @{ this.Layout = "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "任务"; bool IsAdd = Ranwei.Service.OMS.Authority.Authority.HasRole("/Project/ProjectTask/Create");
用js实现可拖动的div
张致豪
07-09 1676
用js实现可拖动的div，其实逻辑很简单，计算鼠标的移动距离然后设置盒子的位置即可 看看效果 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
可拖动DIV层
MyBlog
06-20 715
定义好DIV后，只要把DIV的ID传进去就能实现拖动效果： var oBox=document.getElementById("divID"); //拖动层
vue制作可拖动的div（超级简单）
泥鸽鸽的博客
10-25 7553
一下方法也是我百度的 但是筛选了好几个 发现这个最简单 只要两步： 1.在单文件组件中将这个自定义指令复制进去 2.在需要的div 写上这个指令即可 // 自定义指令 实现可拖动 directives: { drag(el, bindings) { el.onmousedown = function(e) { var disx = e.pageX - el.offsetLeft var disy = e.pageY - el.offsetTop
jquery实现可拖动DIV自定义保存到数据的实例
10-26
主要介绍了jquery实现可拖动DIV自定义保存到数据，有需要的朋友可以参考一下
判断可拖动div是否重合 重合多少
09-05
判断可拖动div是否重合的优化方法 在判断可拖动div是否重合时，效率较低是因为 div 元素的绝对定位和重叠覆盖所导致的计算复杂度增加。以下是优化方法： 1. 使用 boundingClientRect 方法：可以使用 ...
js实现可拖动DIV的方法
01-19
 现在切入正题，说一下js 实现可拖动Div.实现这个功能我们先说一下思路：  1.捕捉鼠标div的mousedown事件  2.捕捉 document的 mousemove事件  3.取消事件 然后我们看一下代码： 代码如下:function Drag(id) {...
设置div不透明
热门推荐
亲亲而仁民，仁民而爱物
12-18 1万+
div{ background-color:White}
td里面文字垂直显示
亲亲而仁民，仁民而爱物
11-30 8492
要实现td里面文字垂直显示，百度、谷歌了很久，都是说的css里设置，无外乎valign、vertical怎样怎样的，说的天花乱坠，却都不可行。 突然想到，不用css直接换行，哈哈，效果很好。 我 爱 编 程
js生成excel对象并导出
亲亲而仁民，仁民而爱物
11-30 7249
//导出excel数据 response:数据 mc:名称 function dcexcel(response,mc){ var xls = new ActiveXObject("Excel.Application");//创建excel的Application对象 xls.visible = true; var xlBook = xls.Workbooks.Add;//增加一个
鼠标拖拽改变div的大小
亲亲而仁民，仁民而爱物
11-25 6995
一： UI/API/1.8/Resizable From jQuery Wiki < UI‎ | API (Redirected from UI/Resizables/resizable) Jump to: navigation, search Overview Options Events Methods Theming jQuery UI Resizable Overv
ul li实现table效果
亲亲而仁民，仁民而爱物
12-13 6613
tag 姓名 身份证号 与户主关系 阿三 3-1 13
DWREngine未定义问题解决方案
亲亲而仁民，仁民而爱物
03-21 5928
首先，要注意dwr自带的js包导入顺序是否Right, 正确如下:   然后，进入 dwr.jar 包, 打开 org\directwebremoting\engine.js 文件， 搜索该文件中是否存在DWREngine变量的定义。 (因为在dwr3.x版本的engine.js中已经取消了DWREngine的定义，) 最后，
vue 可拖动的DIV
最新发布
06-09
Vue 可以通过绑定事件的方式来实现可拖动的 DIV。具体实现方式如下： ```html <template> <div> <div class="drag-box" draggable="true" @dragstart="dragStart" @dragend="dragEnd" :style="{top: position.top + 'px', left: position.left + 'px'}" > 可拖动的 DIV </div> </div> </template> <script> export default { data() { return { position: { x: 0, y: 0, top: 0, left: 0, dragging: false } } }, methods: { dragStart(event) { // 获取鼠标在元素内的偏移量 const offsetX = event.clientX - event.target.offsetLeft; const offsetY = event.clientY - event.target.offsetTop; this.position.x = offsetX; this.position.y = offsetY; this.position.dragging = true; }, dragEnd(event) { this.position.dragging = false; } }, mounted() { // 监听鼠标移动事件 document.addEventListener('mousemove', this.handleMouseMove); }, beforeDestroy() { // 移除鼠标移动事件监听 document.removeEventListener('mousemove', this.handleMouseMove); }, methods: { handleMouseMove(event) { if (this.position.dragging) { // 计算拖动后的位置 this.position.left = event.clientX - this.position.x; this.position.top = event.clientY - this.position.y; } } } } </script> <style> .drag-box { position: absolute; width: 100px; height: 100px; background-color: #f00; color: #fff; text-align: center; line-height: 100px; } </style> ``` 上面的代码中，我们创建了一个可拖动的 DIV，它的 `draggable` 属性被设置为 `true`。在 `dragstart` 事件中，我们获取了鼠标在元素内的偏移量，并将其保存到 `position` 对象中。在 `dragend` 事件中，我们将 `dragging` 属性设置为 `false`。 在 `mounted` 钩子函数中，我们监听了鼠标移动事件，并在 `beforeDestroy` 钩子函数中移除了事件监听。在 `handleMouseMove` 方法中，我们计算了拖动后的位置，并将其保存到 `position` 对象中。在模板中，我们使用 `:style` 绑定了位置信息，使得元素可以随鼠标拖动而移动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值