可拖动的div

最新推荐文章于 2024-01-09 18:19:19 发布
最新推荐文章于 2024-01-09 18:19:19 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pa5201314/article/details/11397163
版权
<html >
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var mouseX, mouseY;
        var objX, objY;
        var isDowm = false;  //是否按下鼠标
        function mouseDown(obj, e) {
            obj.style.cursor = "move";
            objX = document.getElementById("divshow").offsetLeft;
            objY = document.getElementById("divshow").offsetTop;
            mouseX = e.clientX;
            mouseY = e.clientY;
            isDowm = true;
        }
        function mouseMove(e) {
            var div = document.getElementById("divshow");
            var x = e.clientX;
            var y = e.clientY;
            if (isDowm) {
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
                document.getElementById("span1").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;
            }
        }
        function mouseUp(e) {
            if (isDowm) {
                var x = e.clientX;
                var y = e.clientY;
                var div = document.getElementById("divshow");
                div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
                div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
                document.getElementById("span2").innerHTML = "x:" + div.style.top + "  " + "y:" + div.style.left;
                mouseX = x;
                rewmouseY = y;
                document.getElementById("divshow").style.cursor = "default";
                isDowm = false;
            }
        }
    </script>
</head>
<body>
    <span id="span1"></span></br><span id="span2"></span></br>
    <div id="divshow" style="background-color: lightgray; border: 1px solid gray; height: 150px;
        top: 100px; left: 100px; width: 300px; position: absolute;padding:5% 0 0 5%; " οnmοusedοwn="mouseDown(this,event)"
        οnmοusemοve="mouseMove(event)" οnmοuseup="mouseUp(event)">
        亲，我是可以拖动的哦！安全<br/>
        哈哈...
    </div>
</body>
</html>
pa5201314
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV
07-21
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIVv
js实现可拖动DIV的方法
01-19
 现在切入正题，说一下js 实现可拖动Div.实现这个功能我们先说一下思路：  1.捕捉鼠标div的mousedown事件  2.捕捉 document的 mousemove事件  3.取消事件 然后我们看一下代码： 代码如下:function Drag(id) {...
可拖动的DIV
weixin_34346099的博客
08-29 135
在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。 Tips 绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的...
可移动的DIV
lcb530的专栏
06-18 104
[code="html"] 吴丽丽I Love you! var timeObj; var x = 5; var y = 5; window.onload = function moveDiv(){ var bodyWidth = document.body.clientWidth; var bo...
Jquery可移动的DIV
yingzhicai的博客
05-19 969
做这个不难，主要是理解了计算的公式吧，鼠标移动的位置-（鼠标按下的位置-要移动div与浏览器的边距）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有问题的代码</title> <style> * { margin: 0;
判断可拖动div是否重合 重合多少
12-09
总之，判断可拖动div是否重合以及重合多少，需要结合CSS定位和JavaScript动态检测。通过获取元素位置，设定重合条件，计算重合面积，监听拖动事件并提供视觉反馈，我们可以创建出一个交互式的、能准确反映div重合...
jquery实现可拖动DIV自定义保存到数据的实例
10-26
1. jQuery实现DIV元素可拖动的方法 文件中提到的jQuery插件jquery.dragsort.js用于使DIV元素可拖动。插件通过为DIV元素绑定拖动事件来实现这一功能，允许用户通过鼠标拖拽操作来改变DIV元素的位置。在实际应用中，...
div 可移动层
炉火纯青
12-30 2247
可拉伸移动的DIV层，阿里西西整理收集 alixixi com /* DragResize v1.0 (c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com Licensed under the CC-GNU LGPL, version 2.1 or later: http://creative
可移动的div
最新发布
2301_80177550的博客
01-09 399
做一个可移动的div。
可移动div
03-18
NULL 博文链接：https://jsufly.iteye.com/blog/676331
JavaScript可拖动DIV
03-14
NULL 博文链接：https://linshiquan.iteye.com/blog/292086
div可拖拽
qq_38967150的博客
02-01 332
<!doctype html> <html> <head> <meta charset="utf-8"> <title>让div在body中可以任意拖动-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> body { background-color:
简单实现可拖拽的div
sunxiaobai1的博客
11-22 2604
【代码】简单实现可拖拽的div。
可以拖动的div
RSHUEN的博客
04-18 469
可以拖动的div <!DOCTYPE html> <html> <head runat="server"> <title></title> <style> #mov{ background-color: #00DDCC; width: 200px; he...
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、付费专栏及课程。

余额充值