讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

首页 > web前端 > js教程 > 正文

javascript之鼠标拖动位置互换效果代码_javascript技巧

php中文网

发布： 2016-05-16 19:07:39

原创

1429人浏览过

鼠标拖动，位置互换效果，主要用于div，提高用户体验等方面

会译·对照式翻译

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

会译·对照式翻译

97

会译·对照式翻译

<style type="text/css"> 
div.box{ 
position:relative; 
padding:5px; 
background-color:#000; 
width:300px; 
height:300px; 
overflow:hidden; 
} 
div.box div.item{ 
float:left; 
width:90px; 
height:90px; 
background-color:#ccc; 
margin:5px; 
position:relative; 
cursor:pointer; 
} 
div.mask{ 
    width:90px; 
    height:90px; 
    background-color:#f00; 
    opacity:0.8; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
    position:absolute; 
    visibility:hidden; 
    top:20px; 
    left:20px; 
    z-index:10; 
} 
</style>
<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"> 
var darg = { 
    target : null, 
    ox : 0, 
    oy : 0 
}; 
var box = document.createElement("div"); 
box.className = "box"; 
var mask = document.createElement("div"); 
mask.className = "mask"; 
box.appendChild(mask); 
for(var i = 0; i < 9; i ++){ 
    var item = document.createElement("div"); 
    item.className = "item"; 
    item.appendChild(document.createTextNode(i + 1)); 
    item.onmousedown = function(){ 
        var e = arguments[0] || window.event; 
        var o = e.target || e.srcElement; 
        darg.target = o; 
        mask.style["top"] = o.offsetTop + "px"; 
        mask.style["left"] = o.offsetLeft + "px"; 
        mask.style["visibility"] = "visible"; 
        darg.ox = e.clientX - mask.offsetLeft; 
        darg.oy = e.clientY - mask.offsetTop; 
    } 
    box.appendChild(item); 
} 
document.body.appendChild(box); 
function getItem(x,y){ 
    x = x - box.offsetLeft; 
    y = y - box.offsetTop; 
    var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)]; 
    var n = darg.target.nextSibling; 
    var on = o.nextSibling; 
    box.insertBefore(o,n); 
    box.insertBefore(darg.target,on); 
} 
document.onmousemove = function(){ 
    if(darg.target != null && darg.target.nodeType == 1){ 
        var e = arguments[0] || window.event; 
        mask.style["left"] = e.clientX - darg.ox + "px"; 
        mask.style["top"] = e.clientY - darg.oy + "px"; 
    } 
} 
box.onmouseup = function(){ 
    if(darg.target != null && darg.target.nodeType == 1){ 
        var e = arguments[0] || window.event; 
        var o = e.target || e.srcElement; 
        getItem(e.clientX,e.clientY); 
        darg.target = null; 
    } 
}

document.onmouseup = function(){ 
    darg.target = null; 
    mask.style["visibility"] = "hidden"; 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关标签：

javascript

大家都在看：

javascript如何操作浏览器历史记录_如何实现前进和后退功能？ Javascript如何操作JSON_如何进行序列化和解析？ javascript事件是什么_如何为网页元素添加点击事件 javascript定时器有哪些_setTimeout和setInterval有何区别为什么JavaScript的数组方法如此强大_map、filter和reduce如何使用？

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：比较简单的一个符合web标准的JS调用flash方法_javascript技巧下一篇：用js查找法实现当前栏目的高亮显示的代码_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

为什么JavaScript的事件循环如此重要_它如何处理异步任务？ JavaScript事件循环是单线程下调度同步与异步任务的核心机制，通过持续轮询调用栈与任务队列，优先执行宏任务，再清空全部微任务，实现非阻塞异步。

2025-12-19 16:06:56

454

javascript函数如何定义_函数表达式和声明有何不同 JavaScript中定义函数主要有函数声明和函数表达式两种方式：前者具名且全提升，可先调用后定义；后者多为匿名或命名表达式，仅变量声明提升，函数体不提升，适用于回调、条件创建等场景。

2025-12-19 16:01:52

380

如何使用JavaScript进行调试_Chrome开发者工具有哪些实用功能呢 ChromeDevTools调试JavaScript最高效，核心是熟练运用断点（Sources）、Console实时执行、Network排查异步请求、Performance分析性能瓶颈，四者覆盖90%问题。

2025-12-19 15:17:15

498

JavaScript如何实现无限滚动效果？ JavaScript无限滚动核心是监听scroll事件，通过scrollTop+clientHeight≥scrollHeight-阈值判断触底，配合isLoading防抖、DocumentFragment批量插入及无数据提示等优化体验。

2025-12-19 15:09:33

204

javascript如何发送HTTP请求_fetch和axios该如何选择优先用fetch，因其轻量、标准、无需引入；复杂项目需拦截、取消请求、上传进度等时选axios。两者定位不同：fetch是基础设施，axios是增强工具，合适即可。

2025-12-19 14:58:02

451

javascript如何操作浏览器历史记录_如何实现前进和后退功能？ JavaScript通过window.history对象实现浏览器历史记录操作，核心方法包括back()、forward()、go()、pushState()和replaceState()，支持基础导航、灵活跳转及单页应用的状态管理。

2025-12-19 14:57:07

259

Javascript如何操作JSON_如何进行序列化和解析？ JavaScript操作JSON主要靠JSON.stringify()和JSON.parse()：前者将对象序列化为字符串，支持过滤字段和格式化输出；后者将字符串解析为对象，支持reviver函数处理值；二者均不支持函数、undefined、Symbol等类型，需注意Date转换、循环引用及大数字精度问题。

2025-12-19 14:46:02

422

javascript事件是什么_如何为网页元素添加点击事件 JavaScript事件是用户交互触发的信号，addEventListener是现代标准事件监听方法，支持多监听、不覆盖，需确保元素存在DOM中，常用获取方式有getElementById等，避免内联事件和执行时机错误。

2025-12-19 14:36:49

705

javascript定时器有哪些_setTimeout和setInterval有何区别 setTimeout只执行一次，setInterval周期性重复执行；前者用于延迟操作，后者用于轮询或倒计时，均需用clearTimeout/clearInterval手动清除以防内存泄漏。

2025-12-19 14:31:30

988

为什么JavaScript的数组方法如此强大_map、filter和reduce如何使用？ JavaScript数组的map、filter、reduce方法分别用于转换、筛选和聚合：map批量生成新数组，filter返回符合条件的子集，reduce将数组归约为单一值，三者均不修改原数组，提升代码简洁性与可维护性。

2025-12-19 14:08:03

835

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

React 教程

26926次学习
收藏
TypeScript 教程

15905次学习
收藏
Bootstrap 5教程

24181次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部