一.原生js
1、拖拽的流程动作
鼠标按下触发onmousedown事件
鼠标移动触发onmousemove事件
鼠标松开触发onmouseup事件
2、注意事项：
要防止div移出可视框，要限制div移动的横纵坐标；
防止火狐的bug, 要在最后写上return false，阻止默认事件；
防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;
3、代码实现：
html：
可拖动div元素
js：
window.onload = function() {
var box = document.getElementById('box')
box.onmousedown = function(e) { //首先要获取鼠标相对于元素的位置
var disX = e.clientX - box.offsetLeft //clientX,Y鼠标相对于浏览器窗口可视区域的X，Y坐标(窗口坐标)
var disY = e.clientY - box.offsetTop //offsetLeft,top是元素相对父元素的偏移宽度
document.onmousemove = function(e) {
var l = e.clientX - disX
var t = e.clientY - disY
if(l < 0) { //防止div跑出可视框
l = 0;
} else if(l > document.documentElement.clientWidth - box.offsetWidth) {
l = document.documentElement.clientWidth - box.offsetWidth;
}
if(t < 0) {
t = 0;
} else if(t > document.documentElement.clientHeight - box.offsetHeight) {
t = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = l + 'px';
box.style.top = t + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null
}
return false
}
}
二.H5 drag和drop拖放
拖放是html5的标准，任何元素都能够拖放
html：
//设置元素可拖放
js：
function drag(ev) { //ondragstart拖动开始
ev.dataTransfer.setData("ok", ev.target.id); //设置元素属性
}
function allowDrop(ev) { //ondragover拖动结束
ev.preventDefault(); //默认不许放置，阻止默认
}
function drop(ev) { //ondrop放置
ev.preventDefault();
var data = ev.dataTransfer.getData("ok"); //加入元素
ev.target.appendChild(document.getElementById(data));
}
原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: /p>
原生js通过prottype写的一个简单拖拽
使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下
使用powershell/vbs自动化模拟鼠标点击操作
今天想做windows上的自动化,所以才有了模拟鼠标点击的需求,先考虑用powershell实现: 首先先安装一个名为“WASP”免费可用的Powershell扩展程序,下载地址:http://was ...
JS组件系列——Bootstrap Table 表格行拖拽(二：多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
react实现的点击拖拽元素效果
之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...
CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身
CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...
前端笔记之JavaScript(十一)event&;BOM&;鼠标/盒子位置&;拖拽/滚轮
一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高 ...
WEBBROWSER中模拟鼠标点击(SendMessage/PostMessage)
好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...
随机推荐
Java系统变量设置方式
近期碰到一个编码的问题,发现整个平台都是用的GB2312,因此导致webservice调用时有些字不能正常接受. 反编译中间件的源码如下: public static final String nod ...
node.js的ejs模版引擎
ejs版本是0.8.8,生成的views目录下面只有index.ejs and error.ejs,没有layout.ejs. D:\lianchuangfile\nodeDevelop\microb ...
(转)添加PROPAGATION_REQUIRES_NEW 事务没有产生作用
最近在做事务添加时 发现自己的事务没有新建,上网查到 仅用作收藏. 其二 注意 事务的注解 应该在 内层的事务上面 一.描述 Spring遇到嵌套事务时,当被嵌套的事务被定义为" ...
【接口时序】6、IIC总线的原理与Verilog实现
一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE14.7 3.仿真工具:ModelSim-10.4-SE .ChipScope 硬件平台: 1. FPG ...
java io系列05之 ObjectInputStream 和 ObjectOutputStream
本章,我们学习ObjectInputStream 和 ObjectOutputStream ObjectInputStream 和 ObjectOutputStream 介绍 ObjectInputS ...
spring配置jax-ws
在spring配置文件中新建bean(或者是在配置文件中添加bean),在该bean中添加指定的访问地址. @Bean public static SimpleJaxWsServiceExporter ...
linux shell 脚本攻略学习7---tr命令详解
tr命令详解 什么是tr命令?tr,translate的简写,translate的翻译: [trænsˈleit] vi.翻译, 能被译出 vt.翻译, 解释, 转化, 转变为, 调动 在这里用到 ...
C# string[]转List<;string>;
List ltProduct = new List(Product.Split('|'));
