开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js div横向拖动例子

在前端开发中，实现一个 div 元素的横向拖动通常涉及到鼠标事件的处理。以下是一个简单的示例代码，展示了如何实现这一功能：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div 横向拖动示例</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            position: absolute;
            cursor: grab;
        }
    </style>
</head>
<body>
    <div id="draggable"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript 代码 (script.js)

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX = 0;

draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - draggable.offsetLeft;
    draggable.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const x = e.clientX - offsetX;
        draggable.style.left = `${x}px`;
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    draggable.style.cursor = 'grab';
});

解释

HTML 结构：创建一个 div 元素，并设置其初始样式。
CSS 样式：设置 div 的宽度、高度、背景颜色和定位方式。position: absolute; 允许我们通过 JavaScript 动态改变其 left 属性来实现拖动效果。
JavaScript 代码：
- mousedown 事件：当用户按下鼠标按钮时，设置 isDragging 为 true，并记录鼠标点击位置与 div 左边界的偏移量 offsetX。
- mousemove 事件：当用户移动鼠标时，如果 isDragging 为 true，则更新 div 的 left 属性，使其跟随鼠标移动。
- mouseup 事件：当用户释放鼠标按钮时，设置 isDragging 为 false，并重置鼠标样式。

优势

简单易懂：代码逻辑清晰，易于理解和维护。
灵活性高：可以通过调整 CSS 和 JavaScript 代码轻松实现不同的拖动效果。

应用场景

拖放排序：在列表或网格中实现元素的拖放排序。
可拖动组件：在界面中实现可拖动的面板、窗口或工具栏。
游戏开发：在游戏中实现角色或物体的移动。

可能遇到的问题及解决方法

拖动不流畅：可能是由于 mousemove 事件处理频繁导致的性能问题。可以通过节流（throttling）或防抖（debouncing）技术优化事件处理。
拖动超出边界：可以在更新 left 属性时添加边界检查，确保 div 不会拖动到视口外。

希望这个示例能帮助你理解如何在 JavaScript 中实现 div 的横向拖动。如果有更多问题，欢迎继续提问！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS实现鼠标拖动div移动

.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY...= document.getElementById("div1"); var x = e.clientX; var y = e.clientY;...(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) +..."px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y...= document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX

34.4K2 0

简单的鼠标可拖动DIV 兼容IEFF

一个简单的可拖动div，随着鼠标的移动，div可随之走动主要思路：一个div，注册监听onmousedown事件，然后处理获取的对象及其相关值（对象高度，clientX/clientY位置等）并继而转为监测...onmousemove事件，在鼠标移动事件中更新div对象的位置属性鼠标松开的时候解除监听，更新位置完成。...需要注意的两点： 1.更新对象的位置需要用到o.style.left等，这些CSS属性只能内嵌才能被访问到： div id="box" style="left:200px;top:200px;"> box...o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP) 最后是一个可随鼠标拖动的div ?...class="wrap"> div id="box" style="left:200px;top:200px;"> box div> div> <script

2.6K1 0

使用easydrag实现可拖动的DIV弹出框

DOCTYPE HTML> easydrag实现可拖动的DIV弹出框 /* 重置浏览器默认样式 */ body,h1...-- 使用百度的jquery在线cdn --> js"> js没有找到在线的cdn，大家可以自行下载 --> js/easydrag.js">...">关闭点击标题位置进行拖动div> div class="content">div> div> div>

2.3K6 0

js动态添加div

需要的时候调用就好了思路因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收点击第一行的添加点击的时候, 将div...准备好, 添加到内容div中的第一个点击每行的添加将div添加到当前点击行后面一个点击每行删除删除当前div 实现基本思路很简单, 只要在每个点击按钮上添加对应的点击事件, 将结果封装成类....我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...'] || 'content_div_id'; var exampleDivId = params['example_div_id'] || 'example_div_id'; var...this = this; this.addButton.click(function () { _this.addFistItem(); }); // 删除示例div

24.5K4 0

div 等块级标签横向排列的方法总结

块级标签的默认文档流是上下排列的，再配上横向排列的方法，请过适当的嵌套，可以应对几乎所有常见的布局需求，因此，我决定总结一下 div 横向排列的方法。...这也是我初学前端时最困扰的问题~ 以下面这组 div 为例，wrap 的高度由内容撑开 ? 平时是这样的，上下排列~ ? float 浮动 ? ?...成功横向排列了，但是有几个问题~ float 的特点：多个 div 右浮动时，顺序会颠倒，请注意看 div2 和 div3，可以通过将它们再用一个 div 包起来，然后对它们设置左浮动，对父 div...这个空白其实是空白符，因为 inline-block 会使元素在行内排列，也就是跟文字在一起排列，而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙...在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差，丑拒。 ? 不用 inline-block，嘿嘿~ 可以换行，如下图 ?

3.3K2 0

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。...0, 0, 0.85); } #ul1 .active { border: 1px dashed red; } js...div的位置 var l = event.clientX - disX + scrollLeft; var...; } } } via：http://www.w2bc.com/Article/23686 未经允许不得转载：肥猫博客 » 基于js...鼠标拖动图片排序

7.8K3 0

js实现拖动组件移动效果

2015-04-15 14:06:09 今天我来给大家介绍一种js特效，这种特效是当你用鼠标点击组件移动到其他地方后，这个组件就定在了那个地方，这种效果通常用来做视图化排版的。...代码，主要是大体的div布局，我们在这里的组件用的是div，通过下面的js代码来实现组件的移动 js"></script...dragGhost.style.display = "block"; this.column.insertBefore(dragGhost,this); //记录每一列的左边距在拖动过程中判断拖动对象所在的列会用到...= this//不能跟拖动元素自己比较否则不能在本列向下移动 && top 拖动元素的上边距大的元素...CCCCCC;background:#CCCCCC;color:white;cursor:move;} 这样就可以实现组件的移动了，在上面这段代码中需要引入Drag.js

10.1K2 0

JS高级拖动技术 setCapture，releaseCapture

/清除事件 d.οnmοusemοve=null; d.οnmοuseup=null; }; }; } //–> div...:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee”>drag mediv...如果不设置，则div只在当前窗口内被触发。

5.3K1 0

js弹窗小例子

布局大概是这样： Paste_Image.png 首先，弄一个DIV，把弹窗的模子弄出来。

12.8K8 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果 div id="box">div> <script type="text/javascript

9.9K2 0

JS-随机div颜色

7 8 div...javascript"> 14 window.onload = function(){ 15 var oDiv1 = document.getElementById("div1..."); 16 var oDiv2 = document.getElementById("div2"); 17 var a = Math.floor(Math.random...getRandomColor(); 38 } 39 40 41 42 43 div...id="div1">div> 44 div id="div2">div> 45 46 47 以上，是第一种

18.2K7 0

拖动登录框 HTML+CSS+js

charset="UTF-8"> 拖动登录框...class="one">点击，弹出登录框div> div class="login"> div class="title...">登录会员关闭 div> div... div> div class=...div> div> div class="bg">div> var one = document.querySelector

5.4K2 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

上下拖动的 arrow，当上拖动时，arrow 的父 div 的高度变小，当下拖动时，arrow 的父 div 的高度变大。...div class="arrow">div> div> 每一个横向的 div 为 hj-transverse-split-div 并相对定位，里面有一个拖动改变左右的 label 为...拖动改变左右的 label 时，向左时，label 的父 div 的宽变小，label 的父 div 相邻的右边的 div 宽度变大。...">下div> div class="arrow">div> div> 每一个横向的 div 为 hj-vertical-split-div 并相对定位，里面有一个拖动改变左右的...3. js 实现代码： /** * name: split.js * author: biaochen * date: 2018-12-26 * */ $(function()

10K3 0

JS ajax 例子「建议收藏」

用 js ， jQuery 编写 ajax 的样式，三种写法，例子： //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function...DOCTYPE html> 首页 js...f6f6f6,#fff); } tr:hover{ background: linear-gradient(to right,#eee,#f6f6f6); } div...id="show"> div> div> var xhr = new XMLHttpRequest...src.target.style.background = "linear-gradient(to right,#ddd, #eee)"; } } /* //用 js

3.5K4 0

原生JS 实现页面元素的拖动拖拽

实现原理要实现页面元素的拖动，其原理就是根据鼠标的移动实时的更改元素的left 和 top值（当然元素肯定是要做绝对定位的），那么就达到我们要的效果了呀！...absolute; top: 50px; left: 50px; } .move:hover{ cursor: pointer; } div...class="move">div> window.onload = function () { // 目标元素 var move = document.getElementsByClassName

5.3K3 0

js模块化例子

最近在看一本书，里面提到js的模块化，觉得很有必要，所以记录下来 Game.js /** * This is the main class that handles the game life cycle..._canvas.height); }; ---- boardRenderer.js /** * 这个类负责绘制，棋盘，球 * @param context the 2d context to draw..._rows; }; ---- boardModel.js /** * 这个类是负责保存/验证/返回当前游戏的状态 * 如当前的玩家是谁、每个单元格放的是什么球、 * 是不是谁赢了 * @param...this.reset(); } /** * 0代表单元格为空，1代表单元格有红色球，2代表单元格有绿色球 * 因为怕以后忘记这些数字代表什么，干脆把数字存到常量里，代码看起来易懂， * 但是这么多字，前端的js...* ps.变量名全大写表示这是常量，这是一个js程序员之间的约定，表达为 CAPITAL_CASED。

4.7K2 0

原生JS实现拖动拉开序幕特效

给大家分享一个用原生JS实现的拖动拉开序幕特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现拖动拉开序幕特效 * { margin: 0; padding: 0;...> div id="fillRangeValue">div> <input type="range...max="100" onmousemove="rangeSlider(this.value)" onchange="rangeSlider(this.value)"> div

4.7K3 0

原生JS封装拖动验证滑块你会吗？

群里小伙伴投稿作者：_release 原文地址：https://juejin.im/post/5ed37a73e51d45788c739784 前言闲着没事，就想着写写原生js玩玩，在网上看了几个效果后决定做这个效果...id="slider">div class="drag_bg">div>div class="drag_text" onselectstart="return false;" unselectable...="on">拖动滑块验证div>div class="handler handler_bg">div>div>';//像指定元素中放置插件的dom元素 util.addCSS('ul...= null //防止拖动完成后再次拖动 self.emit('complete')//emit通知使用者的回调事件 } else {...="on">拖动滑块验证div>div class="handler handler_bg">div>div>'; util.addCSS('ul, li { list-style

5.7K4 0

原生JS封装拖动验证滑块你会吗？

以下文章来源于程序员成长指北，作者_release 专注 Node.js 技术栈分享，从前端到 Node.js 再到后端数据库，祝您成为优秀的高级 Node.js 全栈工程师。...座右铭：今天未完成的，明天更不会完成前言闲着没事，就想着写写原生js玩玩，在网上看了几个效果后决定做这个效果，并且使用了prototype和eventEmitter封装成了库。...id="slider">div class="drag_bg">div>div class="drag_text" onselectstart="return false;" unselectable...="on">拖动滑块验证div>div class="handler handler_bg">div>div>';//像指定元素中放置插件的dom元素 util.addCSS('ul...="on">拖动滑块验证div>div class="handler handler_bg">div>div>'; util.addCSS('ul, li { list-style

5.9K5 0

【如果你要学JS XII】——使用js实现模态框拖动

这篇文章来实现一下js中的放大镜效果，以及如何实现模态框拖动效果先来了解一下offset，client和scroll系列属性1.offset系列属性使用offset系列相关属性可以动态的得到该元素的位置...class="father"> div class="son">div> div> var box = document.querySelector...2.如何实现js模态框思维整理：1.点击弹出层，模态框和遮挡层就会显示出来display:block;2.点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;3.在页面中拖拽的原理:鼠标按下并且移动...">登录会员div> div> div id="bg" class="login-bg">div> // 1.

1491 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭