js拖拽

最新推荐文章于 2025-08-12 14:37:12 发布
最新推荐文章于 2025-08-12 14:37:12 发布
阅读量84 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/bgwhite/p/9476358.html
本文介绍并演示了如何使用HTML、CSS和JavaScript实现网页元素的拖拽及大小调整功能，包括窗口拖拽、九宫格拖拽等示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson8/03.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(img/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(img/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(img/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type="text/javascript">
/*-------------------------- +
  获取id, class, tagName
+-------------------------- */
var get = {
    byId: function(id) {
        return typeof id === "string" ? document.getElementById(id) : id
    },
    byClass: function(sClass, oParent) {
        var aClass = [];
        var reClass = new RegExp("(^| )" + sClass + "( |$)");
        var aElem = this.byTagName("*", oParent);
        for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        return aClass
    },
    byTagName: function(elem, obj) {
        return (obj || document).getElementsByTagName(elem)
    }
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
  拖拽函数
+-------------------------- */
function drag(oDrag, handle)
{
    var disX = dixY = 0;
    var oMin = get.byClass("min", oDrag)[0];
    var oMax = get.byClass("max", oDrag)[0];
    var oRevert = get.byClass("revert", oDrag)[0];
    var oClose = get.byClass("close", oDrag)[0];
    handle = handle || oDrag;
    handle.style.cursor = "move";
    handle.onmousedown = function (event)
    {
        var event = event || window.event;
        disX = event.clientX - oDrag.offsetLeft;
        disY = event.clientY - oDrag.offsetTop;
        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
            var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
            
            iL <= 0 && (iL = 0);
            iT <= 0 && (iT = 0);
            iL >= maxL && (iL = maxL);
            iT >= maxT && (iT = maxT);
            
            oDrag.style.left = iL + "px";
            oDrag.style.top = iT + "px";
            
            return false
        };
        
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            this.releaseCapture && this.releaseCapture()
        };
        this.setCapture && this.setCapture();
        return false
    };    
    //最大化按钮
    oMax.onclick = function ()
    {
        oDrag.style.top = oDrag.style.left = 0;
        oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
        oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
        this.style.display = "none";
        oRevert.style.display = "block";
    };
    //还原按钮
    oRevert.onclick = function ()
    {        
        oDrag.style.width = dragMinWidth + "px";
        oDrag.style.height = dragMinHeight + "px";
        oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
        oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
        this.style.display = "none";
        oMax.style.display = "block";
    };
    //最小化按钮
    oMin.onclick = oClose.onclick = function ()
    {
        oDrag.style.display = "none";
        var oA = document.createElement("a");
        oA.className = "open";
        oA.href = "javascript:;";
        oA.title = "还原";
        document.body.appendChild(oA);
        oA.onclick = function ()
        {
            oDrag.style.display = "block";
            document.body.removeChild(this);
            this.onclick = null;
        };
    };
    //阻止冒泡
    oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
    {
        this.onfocus = function () {this.blur()};
        (event || window.event).cancelBubble = true    
    };
}
/*-------------------------- +
  改变大小函数
+-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
    handle.onmousedown = function (event)
    {
        var event = event || window.event;
        var disX = event.clientX - handle.offsetLeft;
        var disY = event.clientY - handle.offsetTop;    
        var iParentTop = oParent.offsetTop;
        var iParentLeft = oParent.offsetLeft;
        var iParentWidth = oParent.offsetWidth;
        var iParentHeight = oParent.offsetHeight;
        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
            var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;            
            var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
            var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
            
            isLeft && (oParent.style.left = iParentLeft + iL + "px");
            isTop && (oParent.style.top = iParentTop + iT + "px");
            
            iW < dragMinWidth && (iW = dragMinWidth);
            iW > maxW && (iW = maxW);
            lockX || (oParent.style.width = iW + "px");
            
            iH < dragMinHeight && (iH = dragMinHeight);
            iH > maxH && (iH = maxH);
            lockY || (oParent.style.height = iH + "px");
            
            if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
            
            return false;    
        };
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
};
window.onload = window.onresize = function ()
{
    var oDrag = document.getElementById("drag");
    var oTitle = get.byClass("title", oDrag)[0];
    var oL = get.byClass("resizeL", oDrag)[0];
    var oT = get.byClass("resizeT", oDrag)[0];
    var oR = get.byClass("resizeR", oDrag)[0];
    var oB = get.byClass("resizeB", oDrag)[0];
    var oLT = get.byClass("resizeLT", oDrag)[0];
    var oTR = get.byClass("resizeTR", oDrag)[0];
    var oBR = get.byClass("resizeBR", oDrag)[0];
    var oLB = get.byClass("resizeLB", oDrag)[0];
    
    drag(oDrag, oTitle);
    //四角
    resize(oDrag, oLT, true, true, false, false);
    resize(oDrag, oTR, false, true, false, false);
    resize(oDrag, oBR, false, false, false, false);
    resize(oDrag, oLB, true, false, false, false);
    //四边
    resize(oDrag, oL, true, false, false, true);
    resize(oDrag, oT, false, true, true, false);
    resize(oDrag, oR, false, false, false, true);
    resize(oDrag, oB, false, false, true, false);
    
    oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
    oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
}
</script>
</head>
<body>
<div id="drag" style="left: 661px; top: 131px; width: 733px; height: 549px;">
    <div class="title" style="cursor: move;">
        <h2>这是一个可以拖动的窗口</h2>
        <div>
            <a class="min" href="javascript:;" title="最小化"></a>
            <a class="max" href="javascript:;" title="最大化"></a>
            <a class="revert" href="javascript:;" title="还原"></a>
            <a class="close" href="javascript:;" title="关闭"></a>
        </div>
    </div>
    <div class="resizeL"></div>
    <div class="resizeT"></div>
    <div class="resizeR"></div>
    <div class="resizeB"></div>
    <div class="resizeLT"></div>
    <div class="resizeTR"></div>
    <div class="resizeBR"></div>
    <div class="resizeLB"></div>
    <div class="content">
        ① 窗口可以拖动；<br>
        ② 窗口可以通过八个方向改变大小；<br>
        ③ 窗口可以最小化、最大化、还原、关闭；<br>
        ④ 限制窗口最小宽度/高度。
    </div>    
</div>
 
 
</body></html>

　　

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson6/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>完美拖拽</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,h2,p{margin:0;padding:0;}
body{color:#fff;background:#000;font:12px/2 Arial;}
p{padding:0 10px;margin-top:10px;}
span{color:#ff0;padding-left:5px;}
#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
window.onload=function(){
    var positionArray = [];
 
    var box = document.getElementById("box");
    box.onmousedown = function(evt){
        positionArray = [];
        var x = evt.offsetX;
        var y = evt.offsetY;
        document.onmousemove = function(evt){
            
            box.style.left = evt.clientX - x + "px";
            box.style.top = evt.clientY - y + "px";
            console.log({left:box.offsetLeft, top: box.offsetTop})
            positionArray.push({left:box.offsetLeft, top: box.offsetTop});
        }
    }
    
    box.onmouseup = function(){
        document.onmousemove = null;
    }
    box.children[0].firstChild.onmousedown = function(evt){
        evt.stopPropagation();
    }
    
    box.children[0].firstChild.onclick = function(){
        
        console.log(positionArray.length);
        var index = positionArray.length-1;
        var timer = setInterval(function(){
            if(index < 0) {
                clearInterval(timer);
                return;
            }
            box.style.left = positionArray[index--].left+"px";
            box.style.top = positionArray[index--].top+"px";
        
        },30);
        
        
    }
};
</script>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span>false</span></p>
    <p><strong>offsetTop:</strong><span>231</span></p>
    <p><strong>offsetLeft:</strong><span>533</span></p>
</div>
 
 
</body></html>

　　

3.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background: red;
            cursor: move;
        }
    </style>
</head>
<body>
    活在自己幻想里的母亲和希冀得到爱的女儿。 ------------------题记
 
厌倦和巨大的悲伤后面，充塞着雾霭沉沉的生存。优雅美丽又自私偏执的法国女人Hanah，同时是母亲，也是摄影家。
然而这样的身份对于女儿Violtte来说就是一场灾难。每个小姑娘，有谁没在小时候偷偷用过妈妈的化妆品，没偷偷穿过妈妈的高跟鞋，
没想象过自己长大的样子？但是我们都幸福的长大了，长成了Hanah眼里的庸俗的凡人。
Hanah则把这些变为现实诸加在了女儿Violtte的身上。开始我甚至会慨叹到底是从事艺术工作的，真是前卫先锋的母亲。
Violtte开始有着的那一点新鲜和兴奋，能和母亲共处一室或者说能帮母亲工作的满足成了整幕悲剧里唯一平和温馨的片段。
梳麻花辫着毛衫的跳房子小姑娘就像洋娃娃一样被母亲一步步摆弄成自己喜欢的样子——穿漂亮的衣服，画精致的妆，拍美美的照片，
见识形形色色的人。但母亲Hanah并不止于此，她想要的越来越多，或哥特或洛可可的萝莉已经不足以吸引眼球，还要更大胆更搏出位的，
女儿身上的衣服变成了通往艺术殿堂的枷锁，艺术与色情在母亲眼里达成了完美的统一。
美有没有边界，如果有，它在哪？母亲得到了自己梦寐以求的，赞美与法郎源源不断。女儿失去了所能失去的，不被同龄人接受，也不能一夕长大。
有多爱就有多恨。Violtte逃回家里反锁了门向奶奶哭诉甚至说是求助——“我再也不要见到她”，
年迈的奶奶是以怎样的心情说“我老了，我又老又累，我不能帮你了”。Violtte只有一个妈妈，但Hanah不止有一个模特。
Violtte不能继续拍下去同时接受不了妈妈有新模特，又不能像电影开头的那样回归安宁的生活。
她就在这个夹缝中苦苦挣扎，在这些矛盾里几近崩溃，她甚至对Hanah大吼“我想死”。
影片末尾，Hanah透露的那些隐秘终于成了压垮骆驼的最后一根稻草——我的血液里流淌着incest的原罪。
所以Hanah 是如此厌恶“父系”，不仅是为自己也是为女儿。 对母亲的失望恨意终于变成了恶心和深刻的悲哀，
Violtte在失去母爱的同时也失去了父爱，唯一的救赎——奶奶早已离世，无法面对这些的Violtte就只能不断的逃避下去，不然还能怎么办？
这样大一个世界，她却连一个夹缝都没有。
也许Hanah是真的爱Violtte，如此悲伤，又如此沉重。——也许你我终将行踪不明，但是你该知道我曾经为你动情
 
 
    <div id="box"></div>
    <script>
        var oBox = document.getElementById('box');
        var maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
        var maxTop = document.documentElement.clientHeight - oBox.offsetHeight;
        oBox.onmousedown = function (ev) {
            var e = ev || window.event;
            // 记录鼠标相对于box左侧和上侧的偏移距离
            var iX = e.clientX - oBox.offsetLeft;
            var iY = e.clientY - oBox.offsetTop;
 
            // 创建一个透明层
            if(oBox.setCapture) {
                oBox.setCapture();
            }
            // 鼠标移动
            document.onmousemove = function (ev) {
                var e = ev || window.event;
 
                // 计算移动后的距离
                var iL = e.clientX - iX;
                var iT = e.clientY - iY;
 
                // 限定左侧
                if(iL < 0) {
                    iL = 0;
                }
 
                // 限定上侧
                if(iT < 0) {
                    iT = 0;
                }
 
                // 限定右侧
                if(iL > maxLeft) {
                    iL = maxLeft;
                }
                // 限定下侧
                if(iT > maxTop) {
                    iT = maxTop;
                }
                oBox.style.left = iL + 'px';
                oBox.style.top  = iT + 'px';
            }
            // 鼠标松开
            document.onmouseup = function () {
                // 取消mousemove事件
                document.onmousemove = null;
                // 取消up事件
                document.onmouseup = null;
 
                // 释放透明层（捕获）
                if(oBox.releaseCapture) {
                    oBox.releaseCapture();
                }
            }
            // 阻止浏览器的默认行为
            return false;
        }
    </script>
</body>
</html>

　　

4.九宫格拖拽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格拖拽</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            position: relative;
            list-style: none;
            margin: 30px auto;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        #box li {
            position: absolute;
            width: 120px;
            line-height: 120px;
            background: #eee;
            font-size: 50px;
            text-align: center;
        }
        #box .active {
            z-index: 1;
            color: #fff;
            background: blue;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        
        var oBox = document.getElementById('box');
        var aLi = oBox.children;
 
        for(var i = 0; i < aLi.length; i++) {
            // 第1LI：left: 10 + 0 * 130 top: 10 + 0 * 130
            // 第2LI：left: 10 + 1 * 130 top: 10 + 0 * 130
            // 第3LI：left: 10 + 2 * 130 top: 10 + 0 * 130
            // 第4LI：left: 10 + 0 * 130 top: 10 + 1 * 130
            // 第5LI：left: 10 + 1 * 130 top: 10 + 1 * 130
            // 第6LI：left: 10 + 2 * 130 top: 10 + 1 * 130
            // 第7LI：left: 10 + 0 * 130 top: 10 + 2 * 130
            // 第8LI：left: 10 + 1 * 130 top: 10 + 2 * 130
            // 第9LI：left: 10 + 2 * 130 top: 10 + 2 * 130
 
            // 布局
            aLi[i].style.left = 10 + (i % 3) * 130 + 'px';
            aLi[i].style.top = 10 + Math.floor(i / 3) * 130 + 'px';
 
            // 记录顺序
            aLi[i].index = i;
 
            // 拖拽
            aLi[i].onmousedown = function (ev) {
                var e = ev || window.event;
 
                var iX = e.clientX - this.offsetLeft;
                var iY = e.clientY - this.offsetTop;
                // 针对低版本的IE，建立透明层
                if(this.setCapture) {
                    this.setCapture();
                }
                // 添加样式
                this.className = 'active';
                var that = this;
                document.onmousemove = function (ev) {
                    var e = ev || window.event;
 
                    var iL = e.clientX - iX;
                    var iT = e.clientY - iY;
 
                    that.style.left = iL + 'px';
                    that.style.top  = iT + 'px';
 
                    // 判断是否发生交换位置
                    for(var j = 0; j < aLi.length; j++) {
                        if(
                               aLi[j] !== that // 排除自身
                            && that.offsetLeft + that.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
                            && that.offsetTop + that.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2
                            && that.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
                            && that.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2
                        ) {
                            // 交换顺序
                            var temp = aLi[j].index;
                            aLi[j].index = that.index;
                            that.index = temp;
 
                            // 交换位置
                            aLi[j].style.left = 10 + (aLi[j].index % 3) * 130 + 'px';
                            aLi[j].style.top  = 10 + Math.floor(aLi[j].index / 3) * 130 + 'px';
                            break;
                        }
                    }
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup   = null;
                    // 针对低版本的IE，释放透明层
                    if(this.releaseCapture) {
                        this.releaseCapture();
                    }
                    // 去掉样式
                    that.className = '';
 
                    // 还原位置
                    that.style.left = 10 + (that.index % 3) * 130 + 'px';
                    that.style.top  = 10 + Math.floor(that.index / 3) * 130 + 'px';
                };
                // 阻止浏览器的默认行为
                return false;
            }
        }
 
    </script>
</body>
</html>

　　

 
 
 

转载于:https://www.cnblogs.com/bgwhite/p/9476358.html

JS 拖拽
ljl0433的博客
01-07 533
一、通过 mousedown、mousemove、mouseup 方法实现 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 （1）onmousedown：鼠标按下事件 （2）onmousemove：鼠标移动事件 （3）onmouseup：鼠标抬起事件 重点： （1）一定要绝对定位，脱离文档流才可以移动。 （2）绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。 （3）点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内
three.js拖拽生成场景简单示例
09-06
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
JS拖动 拖拽例子
wpyok168的博客
10-13 226
javascript 拖动 拖拽例子。
JavaScript：js实现拖拽
2401_89690362的博客
12-16 1016
* IE 透明度20% */-moz-opacity:0.8;/* Moz FF 透明度20%*/
实现四种原生JavaScript拖拽效果
weixin_33759613的博客
06-24 783
htmltable {th, td {th {pre {简介：本文深入解析了如何使用原生JavaScript来实现四种不同的拖拽效果。介绍了实现浏览器内拖拽、可超出浏览器边界的拖拽、点击元素头部进行拖拽以及结合头部点击和边界超出的拖拽效果。通过监听mousedownmousemove和mouseup事件，结合对鼠标位置和元素位置的计算，展示了如何控制元素在页面上的移动。
js拖拽上传文件
qx020814的博客
11-10 1640
【代码】js拖拽上传文件。
js拖拽div的例子
qq_45089709的博客
07-17 656
【代码】js拖拽div的例子。
js拖拽交换元素位置
u014708123的博客
08-20 453
摘要:最近在做会议系统,9宫格小画面要支持拖拽调整顺序,需求已经实现了,简单记录下当时的逻辑处理。
JS 拖拽事件
本郡主是喵
09-25 1585
4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个ondrop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。3.松开鼠标(monuseup),将鼠标移动事件清除清除。
javascript拖拽元素交换位置
weixin_43493318的博客
08-21 361
javascript拖拽元素交换位置。
JS拖拽的n种例子
Benxiaohai_311的博客
03-26 2426
一、第一种 <!DOCTYPE html> <!--create by ydj on 2018-08-12--> <html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 400px;
javascript拖拽图片到指定位置
08-14
在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...
Sortable.js拖拽排序使用方法解析
01-21
最近公司项目经常用到一个拖拽 Sortable.js插件，所以有空的时候看了 Sortable.js 源码，总共1300多行这样，写的挺完美的。 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成，  ...
纯js实现可拖拽和点击的悬浮球
04-01
在JavaScript编程中，创建一个可拖拽和点击的悬浮球是一项常见的交互设计任务。这个功能主要应用于各种网页应用，如在线聊天工具、控制面板或游戏等。本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们...
js.zip_imagetrans.js_javascript 拖动
09-20
本项目“js.zip_imagetrans.js_javascript 拖动”关注的就是这一领域，它结合了JavaScript库`ImageTrans.js`和`CJL.0.1.min.js`，实现了图片旋转、鼠标滚轮缩放以及可拖动的div元素等超炫功能。下面将详细介绍这些...
Flink Redis维表：Broadcast Join与Lookup Join对比及SQL示例
最新发布
spark_dev的博客
08-12 560
本文对比了Flink中Redis维表关联的两种方案：Broadcast Join和Lookup Join。Broadcast Join适合小维表（<1GB），通过广播到所有任务实现本地关联，延迟低但内存消耗高；Lookup Join则适合大维表，通过实时查询Redis获取最新数据，内存占用低但延迟较高。文章详细分析了两者的原理、适用场景和性能差异，并提供了两种方案的SQL实现示例。最后建议根据维表大小、更新频率和资源情况选择合适方案，或采用混合模式平衡性能与资源。
前端工程化：pinia
西岭千秋雪的博客
08-11 521
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
Vue3学习之创建vue3项目文件
2301_76989410的博客
08-09 480
Vue3是一个更高效、轻量级的渐进式JavaScript框架，专注于构建用户界面。本文介绍了Vue3项目创建流程：首先安装Node.js并验证环境；然后通过PyCharm创建项目文件夹，使用npm命令初始化Vue项目并选择配置（建议选择TypeScript）；最后清理默认文件结构，开始自定义开发。文中还详细说明了如何删除默认组件代码，为个性化开发做好准备。
HENGSHI SENSE 6.0 功能-AI 查数助手
zandy1011的博客
08-11 398
AI查数助手6.0版本实现重大升级，全面优化BI和数据分析能力。新版本显著提升问答效率，通过流程优化使响应速度提升20%-40%，稳定在10秒内完成。新增ReactJSSDK支持，可无缝嵌入企业现有AI应用。同时推出基于钉钉/企微/飞书的Chatbot数据问答机器人，支持PC/移动端跨平台使用，让企业用户能随时随地通过办公软件快速查询数据。这些升级使企业能更高效利用数据资源，提升决策效率。
原生JS拖拽与easyUI拖拽实现代码下载
这些文件都与实现网页元素的拖拽功能相关，其中涉及原生JavaScript拖拽代码以及基于easyUI框架的拖拽实现。 1. 原生JavaScript拖拽代码： - 描述中提到有两个原生拖拽代码，这两个文件（"moduleDrag.rar" 和 "drag...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值