JavaScript（十八）——HTML DOM ——拖拽

骑猪看日落 2023-02-16 15:27 4阅读 0赞

# 用鼠标拖动两方块 #

思路：

1. 获取两个div

2.将onmousedown   onmousemove onmouse 事件绑定在div上

/**
     * 拖拽
     * onmouseup 鼠标按键被松开
     * onmousedown 鼠标按钮被按下。
     * onmousemove 鼠标被移动。
     * */
    
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    
    drag(box1);
    drag(box2);
    //拖拽
    function drag(obj) {
    //按下
        obj.onmousedown = function (event) {
            // img.style.height = "100px";
            // img.style.width = "100px";
            obj.setCapture && obj.setCapture();
    
            //div偏移量   鼠标.clientX - 元素,offsetLeft
            var ol = event.clientX - obj.offsetLeft;
            var ot = event.clientY - obj.offsetTop;
    
            //移动
            document.onmousemove = function (event) {
                event = event || window.event;
    
                //鼠标位置
                var left = event.clientX - ol;
                var top = event.clientY - ot;
    
                //更改坐标
                obj.style.left = left + "px";
                obj.style.top = top + "px";
    
            };
    //松开
    
            document.onmouseup = function () {
                // img.style.height = "0px";
                // img.style.width = "0px";
                // 取消document.onmousemove
                document.onmousemove = null ;
    
                document.onmouseup = null;
                obj.releaseCaptrue && obj.releaseCaptrue();
            };
    
            return false;
        };
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 html5新特性拖放（拖拽）

html5新特性拖放（拖拽）定义抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。拖放的流程对应的事件选中 ---> 拖动 -

旧城等待，/ 2023年06月25日 15:26/ 0 赞/ 36 阅读

相关 JavaScript（十八）——HTML DOM ——拖拽

用鼠标拖动两方块思路： 1. 获取两个div 2.将onmousedown onmousemove onmouse 事件绑定在div上 /

骑猪看日落/ 2023年02月16日 15:27/ 0 赞/ 5 阅读

相关 html模块拖拽功能

实现html模块拖拽功能如下图 ![Center][] <%@ page contentType="text/html; charset=UTF-8"

我会带着你远行/ 2022年08月05日 05:05/ 0 赞/ 261 阅读

相关 HTML5拖拽效果

drag and drop(拖拽) 拖拽元素事件 : 事件对象为被拖拽元素 dragstart : 拖拽前触发 drag :拖拽前、拖拽结束之间

末蓝、/ 2022年07月19日 12:40/ 0 赞/ 289 阅读

相关 HTML 拖拽效果

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

曾经终败给现在/ 2022年07月19日 06:27/ 0 赞/ 277 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 331 阅读

相关 HTML5——drag拖拽

1. 给标签元素添加属性：draggable = “true”，该元素即可被拖拽，任何元素都可以被拖拽特点：拖走的是灵魂 ![70][] 2. 事件（1）可拖拽元素

桃扇骨/ 2022年05月11日 07:28/ 0 赞/ 390 阅读

相关 javascript拖拽碰撞检测

拖拽碰撞检测碰撞改变颜色 <style> .div1{width: 100px;height: 100px;background: pin

野性酷女/ 2022年01月26日 14:29/ 0 赞/ 300 阅读

相关 javascript 完美拖拽

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

Love The Way You Lie/ 2021年11月11日 04:32/ 0 赞/ 394 阅读

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

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

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