JavaScript练习2 拖动DIV

于 2024-04-29 19:22:07 发布
阅读量61 收藏
点赞数 3
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74432453/article/details/138322849
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable DIV</title>
<style>
.draggable 
{
  width: 150px;
  height: 150px;
  background: #4CAF50;
  color: white;
  text-align: center;
  line-height: 150px;
  user-select: none;
  position: absolute; 
  cursor: pointer;
}
</style>
</head>
<body>

<div id="mydiv" class="draggable">拖动我</div>

<script>
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) 
{
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  }
  else {
    
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) 
  {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) 
  {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement()
  {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

李白家的小桃青
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
weixin_65793170的博客
05-30 4484
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
js的拖拽
weixin_64037609的博客
09-18 263
js拖拽
从基础到进阶：实现div控件的拖拽和缩放功能
最新发布
Twinkle_sone的博客
11-30 2714
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
js实现拖拽效果
qq_56995244的博客
07-26 733
代码 这个循环展示的数据样式可以自定义，按钮是获取最后的顺序。提交按钮方法，获取最终的dom顺序。
JS实现div拖拽
宏斌的博客
01-10 368
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style type="text/css"> #div{ position: absol...
HTML.rar_javascript_javascript html div
09-23
2. **事件监听**：添加`mousedown`、`mousemove`和`mouseup`事件监听器，以实现拖动效果。当用户按下鼠标按钮时开始拖动，移动鼠标时更新`div`的位置，松开鼠标按钮时停止拖动。 3. **计算坐标**：在`mousemove`...
basicSlider:基本的 jquery 滑块 - 用于练习
07-03
【jQuery滑块基础教程】 在Web开发中，滑块组件是一种常见的交互元素，常用于展示图片、数值选择或创建时间轴等。本教程将聚焦于使用jQuery库创建一个基础的滑块...不断练习和探索，你的JavaScript技能将会日益精进。
etchasketch:在 JavascriptJQuery 中构建 etch-a-sketch
07-10
步骤2：初始化JavaScript和jQuery 在HTML中引入jQuery库，然后在`<script>`标签中编写JavaScript代码。初始化时，获取绘图区域的DOM元素，并设置其宽高，使其可拖动，这样用户就可以像真实玩具一样操作。 步骤3：...
JSAPIWorkshop:ArcGIS JS API Workshop练习
05-19
本练习将带你深入学习如何利用JS API进行地图的创建、图层管理、数据交互以及丰富的地图服务集成。 首先，我们要了解JavaScript API的核心概念。它基于HTML和JavaScript，能够与Web浏览器无缝集成，使得地图和地理...
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
JS实现可拖动的DIV效果并限制范围区域
01-12
利用JS实现可拖动的DIV效果，在原有基础上增加的限制在一定区域内的效果。方便，易用。可以很方便地移动到您的工程里面
DIV的拖拽--script
不混了的专栏
05-10 537
 var Class = {//创建类create: function () {return function () {this.initialize.apply(this, arguments);};}};var $A = function (a) {//转换数组return a ? Array.apply(null, a) : new Array;};var $ = function
js拖动div
zhuxiangyu2012的专栏
11-21 741
HTML代码如下，其中，要拖动的div为最外层的div                         新建用户组                                                                 组名称                                  
js 控制div 横向 纵向 移动
OnePiece
06-16 2531
//div 拖动 div的ID container.onmousedown = function() { //获取鼠标当前坐标 var pageX = event.clientX; var pageY = event.clientY; //获取block的坐标，左边界和上边界 var offX = parseInt(this.style.left) || 0;
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4083
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
div可拖拽移动js方法
weixin_43041350的博客
07-14 1618
js代码： 实现例子： 1.需要移动add的弹窗，也就是整个大的div整个大的div前端代码如下所示： 2.点击Add按钮，要弹出这个弹窗，把Add按钮绑定弹出的方法showAddCaseModal() 这里的按钮用a标签来写 3.弹出方法中，使该div可移动：...
JavaScript拖动红色div
05-25
你可以使用JavaScript来实现拖动红色div的效果。具体实现步骤如下： 1. 使用CSS设置红色div的样式和位置。 ```css #red-div { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } ``` 2. 使用JavaScript获取红色div的元素，并为其添加mousedown、mousemove和mouseup事件。 ```javascript var redDiv = document.getElementById('red-div'); var isDragging = false; var dragStartX, dragStartY, offsetX, offsetY; redDiv.addEventListener('mousedown', function(e) { isDragging = true; dragStartX = e.clientX; dragStartY = e.clientY; offsetX = parseInt(window.getComputedStyle(redDiv).left) || 0; offsetY = parseInt(window.getComputedStyle(redDiv).top) || 0; }); document.addEventListener('mousemove', function(e) { if (isDragging) { var newX = e.clientX - dragStartX + offsetX; var newY = e.clientY - dragStartY + offsetY; redDiv.style.left = newX + 'px'; redDiv.style.top = newY + 'px'; } }); document.addEventListener('mouseup', function(e) { isDragging = false; }); ``` 3. 在页面中添加红色div的HTML代码。 ```html <div id="red-div"></div> ``` 这样就可以实现拖动红色div的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李白家的小桃青

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值