一.原生js

1、拖拽的流程动作

  • 鼠标按下 触发onmousedown事件
  • 鼠标移动 触发onmousemove事件
  • 鼠标松开 触发onmouseup事件

2、注意事项:

  • 要防止div移出可视框,要限制div移动的横纵坐标;
  • 防止火狐的bug, 要在最后写上return false,阻止默认事件;
  • 防止鼠标运动时移出div,所以要用document.onmousemove和document.onmouseup,不能用oDiv.onmousemove;

3、代码实现:

html:

<div id='box' style="position:relative;width:100px;height:100px;background:#ee735c;">  <!--为了设置left、top,需相对或绝对定位-->
可拖动div元素
</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:

        <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /> //设置元素可拖放
</div>
<div class="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

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及H5模拟鼠标点击拖拽的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  3. 原生js通过prottype写的一个简单拖拽

    <!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...

  4. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  5. 使用powershell/vbs自动化模拟鼠标点击操作

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

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

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

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

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

  8. CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

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

  9. 前端笔记之JavaScript(十一)event&BOM&鼠标/盒子位置&拖拽/滚轮

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

随机推荐

  1. gdbserver移植到DM368板子上的过程 以及segment fault problem

    问题描述 我在PC机上安装了gdbserver,但是移植到板子上后却出现了问题.运行不了,显示错误:"segment fault". 决定重新在另一台虚拟机上gdbserver. ...

  2. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  3. [Swift]LeetCode55. 跳跃游戏 | Jump Game

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  4. SpringMVC接收json数组对象

    最近帮一个妹子解决一个需求,就是前台使用ajax传三个相同的对象,再加一个form表单对象.然后遇到各种问题,终于解决了,@RequestBody接收Json对象字符串 ​以前,一直以为在Spring ...

  5. spark按某几列删除dataframe重复行

    新建一个 dataframe : val conf = new SparkConf().setAppName("TTyb").setMaster("local" ...

  6. Python链接Mssql之Python库pymssql

    连接数据库 pymssql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...

  7. 『Kruscal重构树 Exkruscal』

    新增一道例题及讲解 Exkruscal \(Exkruscal\)又称\(Kruscal\)重构树,是一种利用经典算法\(Kruscal\)来实现的构造算法,可以将一张无向图重构为一棵具有\(2n-1 ...

  8. Intent简介-Android开发

    一.Intent介绍: Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述 ...

  9. Redis【入门】就这一篇!

    Redis 概述 在我们日常的Java Web开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题,可是一旦涉及大数据量的需求,比如一 ...

  10. spring框架应用系列四:切面编程(环绕通知与前后置通知区别)

    切面编程(环绕通知与前后置通知区别) 本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7867034.html 解决问 ...