一.原生js

1、拖拽的流程动作

鼠标按下 触发onmousedown事件

鼠标移动 触发onmousemove事件

鼠标松开 触发onmouseup事件

2、注意事项：

要防止div移出可视框，要限制div移动的横纵坐标；

防止火狐的bug, 要在最后写上return false，阻止默认事件；

防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;

3、代码实现：

html：

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&sol;vbs自动化模拟鼠标点击操作

今天想做windows上的自动化,所以才有了模拟鼠标点击的需求,先考虑用powershell实现: 首先先安装一个名为“WASP”免费可用的Powershell扩展程序,下载地址:http://was ...

JS组件系列——Bootstrap Table 表格行拖拽(二：多行拖拽)

前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

react实现的点击拖拽元素效果

之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...

CSharpGL&lpar;21&rpar;用鼠标拾取、拖拽VBO图元内的点、线或本身

CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...

前端笔记之JavaScript(十一)event&amp&semi;BOM&amp&semi;鼠标&sol;盒子位置&amp&semi;拖拽&sol;滚轮

一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

WEBBROWSER中模拟鼠标点击&lpar;SendMessage&sol;PostMessage&rpar;

好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...

随机推荐

Java系统变量设置方式

近期碰到一个编码的问题,发现整个平台都是用的GB2312,因此导致webservice调用时有些字不能正常接受. 反编译中间件的源码如下: public static final String nod ...

node&period;js的ejs模版引擎

ejs版本是0.8.8,生成的views目录下面只有index.ejs and error.ejs,没有layout.ejs. D:\lianchuangfile\nodeDevelop\microb ...

&lpar;转&rpar;添加PROPAGATION&lowbar;REQUIRES&lowbar;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&num; string&lbrack;&rsqb;转List&lt&semi;string&gt&semi;

List ltProduct = new List(Product.Split('|'));