javascript 拖动

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量89 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_20503/article/details/82297987
版权 

<style>
div{position:absolute;}
</style>
<script type="text/javascript">
function $(i){return document.getElementById(i)}
var Bj={
init:function(){}
,down:function(e){this.d = true;}
,up:function(){this.d = false;}  
,move:function(e){   
e = e || window.event;
if(this.d){
$("Cl1").style.left = e.clientX-50+ "px";
$("Cl1").style.top = e.clientY-50+ "px";
if(e.clientX>parseInt($("Cl2").style.left)&&e.clientX<(parseInt($("Cl2").style.left)+parseInt($("Cl2").style.width))&&e.clientY>parseInt($("Cl2").style.top)&&e.clientY<(parseInt($("Cl2").style.top)+parseInt($("Cl2").style.height)))
$("Cl2").style.background ="#FF0000";
else
$("Cl2").style.background ="#00FF00";
}
}
}
</script>
</HEAD>
<BODY>
<div id=Cl1 onMouseMove=Bj.move(event,this) onMouseDown=Bj.down(event,this) onmouseup='Bj.up()' style="left:100px; top:100px;width:100px;height:100px;border:1px solid #000000; background:#666666;z-index:10">拖我</div>
<div id=Cl2 onMouseMove=Bj.move(event,this) onMouseDown=Bj.down(event,this) onmouseup='Bj.up()' style="left:100px; top:220px;width:200px;height:100px;border:1px solid #000000; background:#00FF00">到这里</div>
iteye_20503
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 拖拽功能
小菜的博客
09-24 847
JavaScript 拖拽功能 - Web前端工程师面试题讲解 拖动图片 <img draggable="true"> 拖动时 开始 dragstart 进行中 drag 结束 dragend const h1 = document.querySelector('h1') // 没有进行拖拽中，会显示 document.addEventListener('dragstart', e => { h1.innerHTML = '开始拖拽' console.log('开始拖拽');
JavaScript 拖拽div
Tml的博客
05-03 180
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽div</title> <style type="text/css"> #box1{ width: 60px; height: 60px; background-color: green; position: absolute; } #box2{ wid.
JavaScript拖拽
码上暴富
09-18 146
JavaScript拖拽JavaScript拖拽设置元素为可拖放拖动什么 - ondragstart 和 setData()放到何处 - ondragover进行放置 - ondrop JavaScript拖拽 写一个vue指令，原理就是使用blob实现下载 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
Javascript实现拖拽效果
qq_61716556的博客
05-09 981
我们执行拖拽操作时， 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标 基于以上操作，页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。 在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。 在onmouseup事件中，我们需要以
JavaScript拖拽效果
luffy_999的博客
03-15 2372
** 要实现JavaScript的拖拽效果，首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || window.event; 实现拖拽效果的坐标 **clientX:**鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) **clientY:**鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离) **offsetX:...
javascript 拖拽函数
FinGet的博客
06-18 593
1.拖拽的时候，如果有文字被选中，会产生问题 原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果 解决： 标准：阻止默认行为 非标准ie：全局捕获 //设置全局捕获 ，当我们给一个元素设置全局捕获以后， // 那
JavaScript 拖拽的模态框
qq_56303170的博客
08-25 119
JavaScript 拖拽的模态框 【案例分析】 点击弹出层，会弹出模态框，并且显示遮挡层 点击关闭按钮，可以关闭模态框，并且同时关闭遮挡层 鼠标放到模态框在上面一行，可以按住鼠标拖拽模态框在页面中移动 鼠标放松，可以停止拖动模态框 页面拖拽的事件是：鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup 拖拽过程：鼠标移动过程中，鼠标获得最新的left、right值并赋值给模态框 实现元素居中效果 left: 50%; top: 50%; transform: translat
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
weixin_65793170的博客
05-30 4752
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
JavaScript实现拖动方框
qq_53972864的博客
11-20 182
JavaScript实现拖动方框
JavaScript 拖拽翻页效果代码
10-29
JavaScript 拖拽翻页效果是一种用户交互设计，它允许用户通过在页面上拖动鼠标来翻阅多个页面，提供了一种独特的浏览体验。这种效果通常应用于电子书、画廊或者任何需要滚动或切换内容的场景。在JavaScript和CSS的...
javascript拖拽效果延伸学习
10-22
在JavaScript中，拖拽效果是一种常见的交互设计，它允许用户通过鼠标操作页面元素，使其在页面上移动。在本文中，我们将深入探讨两种基于JavaScript实现的拖拽效果的延伸应用。 首先，我们来看第一种效果：实现拖拉...
javascript拖拽应用实例
10-22
主要为大家详细介绍了javascript拖拽应用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Drag:javascript拖动组件
07-06
"Drag:javascript拖动组件"是一个关于如何使用JavaScript实现拖放功能的专题，主要关注如何创建一个可拖动的组件。下面将详细介绍这个主题及其相关知识点。 首先，`Drag`看起来是一个自定义的JavaScript类或者函数...
move_div.rar_javascript 拖动
09-14
总的来说，掌握JavaScript拖动技术对于前端开发者来说是至关重要的，因为它能为网页增添生动性和用户友好性。通过理解这个示例，你可以进一步提升你的JavaScript技能，并将这种交互式设计应用到实际项目中。
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 439
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 214
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
javaScript 拖动盒子代码
05-10
以下是一个简单的 JavaScript 拖动盒子的代码示例： HTML 代码： ```html <div id="myBox" style="width: 100px; height: 100px; background-color: blue; position: absolute; left: 0; top: 0;"></div> ``` JavaScript 代码： ```javascript var myBox = document.getElementById("myBox"); var isDragging = false; var prevX, prevY; myBox.addEventListener("mousedown", function(e) { isDragging = true; prevX = e.clientX; prevY = e.clientY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var deltaX = e.clientX - prevX; var deltaY = e.clientY - prevY; var newX = parseInt(myBox.style.left) + deltaX; var newY = parseInt(myBox.style.top) + deltaY; myBox.style.left = newX + "px"; myBox.style.top = newY + "px"; prevX = e.clientX; prevY = e.clientY; } }); document.addEventListener("mouseup", function(e) { isDragging = false; }); ``` 注释： 1. 首先通过 `document.getElementById` 获取要拖动的 DOM 元素。 2. 在鼠标按下时，设置一个标志位 `isDragging`，表示正在拖动。 3. 记录下鼠标按下时的坐标 `prevX` 和 `prevY`。 4. 在鼠标移动时，如果 `isDragging` 为真，则根据当前鼠标坐标和上一次坐标的差值计算出新的位置，并设置到元素的 `left` 和 `top` 属性上。 5. 在鼠标抬起时，将 `isDragging` 标志位设为假。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值