#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}

  html

<div id="div1">
</div>

  js

     window.onload = function () {
var oDiv = document.getElementById('div1');
//pc端
oDiv.onmousedown = function (ev) {
var oEvent = ev || event; //需要获取和事件相关的信息时使用
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY; if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
} if (t < 0) {
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
t = document.documentElement.clientHeight - oDiv.offsetHeight;
} oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
}; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
//移动端
// 拖拽
// 获取节点
var block = document.getElementById("right");
var oW, oH;
// 绑定touchstart事件
oDiv.addEventListener("touchstart", function (e) {
var touches = e.touches[0];
oW = touches.clientX - oDiv.offsetLeft;
oH = touches.clientY - oDiv.offsetTop;
//阻止页面的滑动默认事件
document.addEventListener("touchmove", defaultEvent, false);
}, false);
oDiv.addEventListener("touchmove", function (e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if (oLeft < 0) {
oLeft = 0;
} else if (oLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
oLeft = (document.documentElement.clientWidth - oDiv.offsetWidth);
}
oDiv.style.left = oLeft + "px";
oDiv.style.top = oTop + "px";
}, false);
oDiv.addEventListener("touchend", function () {
document.removeEventListener("touchmove", defaultEvent, false);
}, false); function defaultEvent(e) {
e.preventDefault();
};
};

pc端移动端拖拽实现的更多相关文章

  1. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  2. 适合pc端的移动拖拽,分享一下。

    h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...

  3. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  4. javascript小实例,PC网页里的拖拽

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...

  5. javascript小实例,PC网页里的拖拽(转)

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  6. js实现移动端悬浮图标拖拽

    /** * Created by Administrator on 2019/5/23. */ window.onload = function () { var oDiv = document.ge ...

  7. JavaScript小实例:拖拽应用(二)

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  8. javascript小实例,拖拽应用(一)

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  9. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

随机推荐

  1. 【Python3爬虫】网易云音乐爬虫

    此次的目标是爬取网易云音乐上指定歌曲所有评论并生成词云 具体步骤: 一:实现JS加密 找到这个ajax接口没什么难度,问题在于传递的数据,是通过js加密得到的,因此需要查看js代码. 通过断掉调试可以 ...

  2. REST API设计指导——译自Microsoft REST API Guidelines(一)

    前言 前面我们说了,有章可循,有据可依,有正确的产品流程和规范,我们的工作才不至于产生混乱,团队的工作才能更有成效.我们经常见到,程序开发可能只用了半个月,但是接口的联调却经常需要花费半个月甚至一个月 ...

  3. Spring Boot 2.x (八):日志框架的使用

    我们为啥要用日志? 最初我们开始接触Java的时候,我们通常会使用System.out.println()将我们想要知道的信息打印到控制台. 但是,如果在服务器上我们去运行我们的Java程序,这个时候 ...

  4. js内存深入学习(二)

    继上一篇文章 js内存深入学习(一) 3. 内存泄漏 对于持续运行的服务进程(daemon),必须及时释放不再用到的内存.否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃. 对于不再用到的内 ...

  5. 【转】C#中判断网址是否有效

    本文内容来源网络,如涉及版权,请联系作者删除. 思路:C#语言判断网址是否正确,思路是向网址发起连接,根据状态判断网址是否有效. 代码如下: //仅检测链接头,不会获取链接的结果.所以速度很快,超时的 ...

  6. php 使用Glob() 查找文件技巧

    定义和用法 glob() 函数返回匹配指定模式的文件名或目录. 该函数返回一个包含有匹配文件 / 目录的数组.如果出错返回 false. 参数 描述 file 必需.规定检索模式. size 可选.规 ...

  7. Qt Creator的下载和安装

    原文:https://blog.csdn.net/weixin_38090427/article/details/83827678 一,Qt和Qt Creator的区别 Qt是C++的一个库,或者说是 ...

  8. 【20190304】JavaScript-知识点总结:Set,异或

    ES6新特性:Set ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS ...

  9. JS table内容转成二维数组,支持colspan和rowspan

    思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...

  10. 自定义xUtils框架

    xUtils是基于Afinal开发的目前功能比较完善的一个Android开源框架,最近又发布了xUtil3.0,在增加新功能的同时又提高了框架的性能.它的功能很强大,但是有时候我们只需要其中的一些功能 ...