JavaScript实现Html元素的拖拽

最新推荐文章于 2023-12-05 01:36:46 发布
最新推荐文章于 2023-12-05 01:36:46 发布
阅读量849 收藏
点赞数
分类专栏： JavaScript专辑 文章标签： javascript html function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sutao_713/article/details/1920761
版权

<html>
    <head>
        <title>JavaScript实现Html元素的拖拽</title>

      
<script language=javascript>
      var diffx,diffY;
      var objDiv;
      function beginDrag()
      {
         objDiv = document.getElementById("div1");
        diffX = event.clientX -objDiv.offsetLeft;
         diffY = event.clientY - objDiv.offsetTop;
        document.body.attachEvent("onmousemove",mousemove);
        document.body.attachEvent("onmouseup",removeEvent);
       
       
      }
      function mousemove()
      {
        
        objDiv.style.left = event.clientX-diffX;
        objDiv.style.top =event.clientY-diffY;
       
      }
      function removeEvent()
      {
        objDiv = window.event.srcElement;
        document.body.detachEvent("onmousemove",mousemove);
        document.body.detachEvent("onmouseup",removeEvent)
      }
  
      </script> 
    </head>
    <body>
        <p >JavaScript实现DIV的拖拽<div id="div1" style="background-color:Blue; width:100px; height:100px; position:absolute;" οnmοusedοwn="beginDrag()"></div></p>
       
    </body>
</html> 

sutao_713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现拖动元素交换位置
10-23
在JavaScript中实现拖动元素并交换位置的效果，通常涉及到事件监听、CSS样式调整以及DOM操作。以下是一个简化的实现步骤： 1. **设置HTML结构**： 首先，你需要创建一个包含多个可拖动元素（如`<li>`）的容器（如`...
HTML元素拖动
eliodadada的博客
04-14 785
需要注意的是：dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。拖放涉及到两种元素，一种是被拖拽元素（源对象），一种是放置区元素（目标对象）。如下图所示，按住A元素往B元素拖拽，A元素即为源对象，B元素即为目标对象。首先，为了使元素可拖动，把 draggable 属性设置为。1. 设置元素为可拖放。
HTML5 学习笔记（七）--- 元素拖放
weixin_45092437的博客
08-04 793
一、拖放事件 1、概念 ​ 在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。 ​ **注意：**要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。 2、事件 **① dragStart：**在元素拖动开始时触发，事件对象是被拖动元素。 **② drag：**在元素拖动过程中触发，事件对象是被拖动元素。
HTML5实现拖放
上庸者-不服周
09-30 3630
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
前端——html拖拽原理
最新发布
编程知识分享，主打前端
12-05 3万+
大家好，我是yma16，本文分享关于 前端——html拖拽原理。 vue3系列相关文章： vue3 + fastapi 实现选择目录所有文件自定义上传到服务器 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示 让大模型分析csdn文章质量 —— 提取csdn
js 实现拖拽元素
qq_41219789的博客
03-29 6637
js 实现拖拽元素 原理：实现拖拽效果其实就是通过监听鼠标移动事件，实时改变元素的位置。所以重点就是 进行位置的计算。 位置计算原理： 因为需要计算元素的位置变化，所以需要掌握几个关于位置的api api 描述 offsetTop 元素到offsetParent顶部的距离，距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。 offsetLeft 元素到offsetParent左边的距离，距离元素
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML5如何实现元素拖拽
09-28
在本文中，我们将深入探讨如何利用HTML5实现元素拖拽，并详细介绍相关的JavaScript事件和处理方法。 首先，要实现拖放功能，我们需要在HTML中设置拖放元素。在给定的示例代码中，有两个`<div>`元素（#box1 和 #box2...
原生javascript实现拖动元素示例代码
12-10
本文介绍原生javascript实现元素拖动。 思路： 1.首先改变被拖动元素的布局属性，关键是“position:absolue”； 2.捕捉鼠标事件”mousedown”,”mousemove”,”mouseup”； 3.当触发”mousedown”时，记录下当前鼠标...
Javascript实现网页元素拖拽排序
03-05
总的来说，JavaScript实现网页元素拖拽排序涉及HTML的`<draggable>`属性、JavaScript的事件监听和DOM操作。通过这些技术，我们可以创建出交互性强、用户体验佳的拖拽排序功能，适用于各种列表、网格等布局的网页元素...
HTML拖拽
m0_74331185的博客
12-06 1956
HTML拖拽
html5实现元素拖拽,实现元素拖拽的两种方式
weixin_32142311的博客
06-19 1798
第一种方式：使用h5的api datatransfer实现思路：1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。代码如下：.box1 {width: 100px;height: 100px;border: 1px black solid;margin-...
HTML页面元素拖动
劲枫的博客
06-06 2755
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; html { font-size: 1
js实现拖动div元素（js实现元素拖动）
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
HTML5元素拖放
xcgame的博客
03-01 572
注：如果文本出现不能自动换行现象，请将游览器调成兼容模式概叙  HTML5中的元素都是可以拖放的，拖放可以分成两个动作。   在某个元素上按下，然后开始移动鼠标，在移动的过程中，只要没有松开鼠标，将会不断产生拖动事件，这个过程称为“拖”。   把被“拖”的移到另一个元素上并松开鼠标，这个动作被称为“放”。   拖放操作“拖”和“放”两个动作组成。启动“拖”  在HTML5中 < img../
html元素拖拽 标签拖拽
xjh的博客
08-23 440
调用发方法 传入要拖拽元素的id elDrag (id)； 兼容 pc端 & 手机端 只做左右吸附 上下超出未做限制 放开位置小于宽度50%靠左吸附，大于50%靠右吸附 elDrag (id) { var dragEl = ''; var bodyWidth = $(document.body).width(); var flag = false; var cur = { x:0, y:0 }; var nx = 0; var ny = 0
javascript拖拽元素互换位置，实现代码
06-13
以下是一个简单的 JavaScript 拖拽元素互换位置的实现代码，你可以根据自己的需要进行修改： HTML 部分： ```html <div class="drag-container"> <div class="drag-item" draggable="true"> 拖拽元素1 </div> <div class="drag-item" draggable="true"> 拖拽元素2 </div> <div class="drag-item" draggable="true"> 拖拽元素3 </div> </div> ``` CSS 部分： ```css .drag-container { display: flex; } .drag-item { width: 100px; height: 100px; margin-right: 10px; background-color: #ccc; text-align: center; line-height: 100px; cursor: move; } ``` JavaScript 部分： ```javascript const dragItems = document.querySelectorAll('.drag-item'); let dragItem = null; // 获取元素距离页面左上角的距离 function getPosition(el) { let x = 0, y = 0; while (el !== null) { x += el.offsetLeft; y += el.offsetTop; el = el.offsetParent; } return { x, y }; } // 判断两个元素是否相交 function isOverlap(el1, el2) { const el1Rect = el1.getBoundingClientRect(); const el2Rect = el2.getBoundingClientRect(); return !( el1Rect.bottom < el2Rect.top || el1Rect.top > el2Rect.bottom || el1Rect.right < el2Rect.left || el1Rect.left > el2Rect.right ); } // 获取拖拽元素的位置信息 function getItemPosition(item) { const { x, y } = getPosition(item); const width = item.offsetWidth; const height = item.offsetHeight; return { x, y, width, height }; } // 交换两个元素的位置 function swapItems(item1, item2) { const parent = item1.parentNode; const temp = document.createElement('div'); parent.insertBefore(temp, item1); parent.insertBefore(item1, item2); parent.insertBefore(item2, temp); parent.removeChild(temp); } // 拖拽事件处理函数 function handleDragStart(e) { dragItem = e.target; } function handleDragOver(e) { e.preventDefault(); } function handleDragEnter(e) { e.preventDefault(); if (isOverlap(dragItem, e.target)) { e.target.style.border = '2px dashed red'; } } function handleDragLeave(e) { e.target.style.border = ''; } function handleDrop(e) { e.preventDefault(); e.target.style.border = ''; if (isOverlap(dragItem, e.target)) { const item1 = dragItem; const item2 = e.target; swapItems(item1, item2); } } // 绑定拖拽事件监听器 dragItems.forEach(item => { item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragover', handleDragOver); item.addEventListener('dragenter', handleDragEnter); item.addEventListener('dragleave', handleDragLeave); item.addEventListener('drop', handleDrop); }); ``` 上述代码实现了拖拽元素的互换位置，基本思路是通过拖拽事件监听器来获取拖拽元素和目标元素的位置信息，并根据位置信息判断是否需要交换位置。交换位置时，使用一个临时元素来占位，然后将两个元素互换位置即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值