javascript：鼠标拖动图标技术

博客开通好些天，一直都还没写点东西呢，刚刚学习了个js的小技术，还蛮好玩的，以后会把做的一些小例子贴上来，方便自己也可以跟大家一起分享学习成果，哈哈~~

这个例子简单讲就是鼠标拖动图标到它任意想去的地方

代码

<body>
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000";></div>
<script>
var bb = document.getElementById("block");
bb.onmousedown = function(){

//获取鼠标当前坐标
var pageX = event.clientX;
var pageY = event.clientY;

//获取block的坐标，左边界和上边界
var offX = parseInt(this.style.left)||0;
var offY = parseInt(this.style.top)||0;

//计算出鼠标坐标相对于block坐标的间距
var offLX = pageX-offX;
var offLY = pageY-offY;
if(!document.onmousemove){
document.onmousemove = function(){
bb.style.left=event.clientX-offLX; //设置block的X坐标
bb.style.top=event.clientY-offLY; //设置block的Y坐标
}

}

}
document.onmouseup = function(){document.onmousemove = null;} //鼠标弹起
</script>
</body>

转载于:https://www.cnblogs.com/xiaoyuanzi/archive/2010/02/05/1664047.html

javascript：鼠标拖动图标技术相关推荐

JavaScript鼠标拖动绘制方框实现选区
学习编程,与君共勉. 针对JavaScript拖动鼠标绘制方框实现选区的方法,在网上查了很多,但感觉不是写的很繁琐就是感觉很乱,没有一个详细的步骤,这对于我们这些菜鸟来说真的很难理解,所以我写了一份比 ...
JavaScript实现拖动滑块验证（方法已封装）
前提之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...
html弹出窗口是浮动,JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodyc ...
Qt官方示例-拖动图标
拖动图标示例显示了如何在同一应用程序中的小部件之间以及不同应用程序之间拖放图像数据. 在使用拖放的许多情况下,用户开始从特定的窗口小部件拖放,并将有效负载拖放到另一个窗口小部件上.在此示例中,我们 ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
Java Selenium Actions模拟鼠标拖动dragAndDrop总结
鼠标拖动API Actions action = new Actions(webdriver); ##source-要拖动的元素A,target-拖动元素A到达的目标元素 action.dragAnd ...
html鼠标响应事件吗,学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动 ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
win10系统文件拖拽卡顿_windows10鼠标拖动窗口有延迟如何修复
windows10鼠标拖动窗口有延迟如何修复?使用win10系统的过程中,如果遇到了鼠标拖动窗口有延迟卡顿的情况,通常是系统设置的问题或者是驱动问题.可以尝试重装驱动或者是在运行中使用main.cpl ...

javascript：鼠标拖动图标技术

javascript：鼠标拖动图标技术相关推荐

最新文章

热门文章