拖拽函数实例

电玩女神 2022-09-14 09:49 182阅读 0赞

**css:**

<style>
            div {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                background-color: red;
            }
    
            img {
                width: 100%;
                height: 100%;
            }
        </style>

**html:**

<div>
            <img src="./p.jpg" alt="">
        </div>

**javascript:**

<script>
            // 1. 当鼠标按下之后 鼠标移动的时候 让div跟随鼠标移动
            // 1.1获取元素
            var div = document.querySelector('div');
            console.log(div);
            // 1.2 当鼠标按下之后
            div.onmousedown = function () {
                // 1.4 鼠标距离元素左侧的距离x1 = 鼠标距离页面左侧(clientX) x - 元素距离页面左侧的距离(offsetLeft) ol
                // x1 = x - ol
                var x1 = event.clientX - div.offsetLeft;
                // 鼠标距离元素顶部的距离y1 = 鼠标距离页面顶部(clientY)  - 元素距离页面顶部的距离(offsetTop)
                var y1 = event.clientY - div.offsetTop;
                console.log(x1, y1);
                // 1.3 鼠标是在全页面移动 document
                document.onmousemove = function () {
                    // 1.5 元素左边框距离页面左侧的距离
                    var l = event.clientX - x1;
                    var t = event.clientY - y1;
                    console.log(l, t);
                    // 1.6 将值赋值给元素
                    div.style.left = l + 'px';
                    div.style.top = t + 'px';
                    // 设置全局捕获
                    if (div.setCapture) {
                        div.setCapture();
                    }
                    // 阻止默认行为
                    return false;
                };
            };
            // 2. 当鼠标抬起之后 取消鼠标的移动事件
            document.onmouseup = function () {
                document.onmousemove = null;
                // 释放全局捕获
                if (div.releaseCapture) {
                        div.releaseCapture();
                    }
            };
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![2021100417210695.png][]

![20211004172120707.png][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0f4682db9d65405b9b4a91dc51ea5096.png
[2021100417210695.png]: /images/20220828/5d99ce29940c4452b9e6e98b55f0557b.png
[20211004172120707.png]: /images/20220828/86880a81c69d4f31b75575892252c258.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关拖拽div

被拖拽元素需要绝对定位。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

怼烎@/ 2023年10月06日 15:32/ 0 赞/ 83 阅读

相关 js拖拽

拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

怼烎@/ 2023年06月09日 04:59/ 0 赞/ 49 阅读

相关拖拽函数实例

css: <style> div { width: 100px; height

电玩女神/ 2022年09月14日 09:49/ 0 赞/ 183 阅读

相关 flex拖拽实例

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2

向右看齐/ 2022年08月05日 15:12/ 0 赞/ 220 阅读

相关拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 357 阅读

相关 JS 拖拽

实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

╰半夏微凉°/ 2022年05月22日 08:50/ 0 赞/ 359 阅读

相关 jQuery 拖拽

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>jQu

心已赠人/ 2022年04月14日 20:12/ 0 赞/ 358 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 515 阅读

相关 jQuery拖拽原理实例

HTML源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2021年11月19日 11:40/ 0 赞/ 372 阅读

相关 javascript拖拽之从浏览器外拖拽（drag）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2021年11月01日 05:40/ 0 赞/ 604 阅读