【JS】原生实现拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <img id="ball" src="https://js.cx/clipart/ball.svg" width = "100px" height = "100px" alt="">
<object data="https://js.cx/clipart/ball.svg" width="100" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/imstall/" /> -->
<img id="ball" src = "https://www.baidu.com/img/bd_logo1.png?qua=high&where=super" alt = "logo">
<div>helloworld</div>
<script>
const ball=document.querySelector("#ball")
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
// 移动现在位于坐标 (pageX, pageY) 上的球
// 将初始的偏移考虑在内
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
// 在 mousemove 事件上移动球
document.addEventListener('mousemove', onMouseMove);
// 放下球,并移除不需要的处理程序
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>
【JS】原生实现拖拽的更多相关文章
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 好玩的原生js的简单拖拽
这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- js仿QQ拖拽删除
原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
随机推荐
- wm_concat结果长度限制的有关问题 ORA-06502: PL/SQL: 数字或值错误
该函数作用是把列值合并(用英文逗号分割),但是数量有限制,返回的字符数上线是4000(oracle11g),超过会报错,听说oracle版本到 11.2.0.2.0 或以上返回的是clob类型,长度就 ...
- 基于Netty实现自定义消息通信协议(协议设计及解析应用实战)
所谓的协议,是由语法.语义.时序这三个要素组成的一种规范,通信双方按照该协议规范来实现网络数据传输,这样通信双方才能实现数据正常通信和解析. 由于不同的中间件在功能方面有一定差异,所以其实应该是没有一 ...
- Java安全之基于Tomcat的Filter型内存马
Java安全之基于Tomcat的Filter型内存马 写在前面 现在来说,内存马已经是一种很常见的攻击手法了,基本红队项目中对于入口点都是选择打入内存马.而对于内存马的支持也是五花八门,甚至各大公司都 ...
- 下一代的 3D Tiles 前瞻
下一代的 3D Tiles 前瞻 原文:Introducing 3D Tiles Next, Streaming Geospatial to the Metaverse 原文发布时间:2021年11月 ...
- 【Microsoft Azure 的1024种玩法】七.Azure云端搭建部署属于自己的维基百科
[简介] MediaWiki是全球最著名的开源wiki程序,运行于PHP+MySQL环境.MediaWiki从2002年2月25日被作为维基百科全书的系统软件,并有大量其他应用实例.MediaWiki ...
- Kafka从入门到放弃(一) —— 初识Kafka
消息中间件的使用已经越来越广泛,基本上具有一定规模的系统都会用到它,在大数据领域也是个必需品,但为什么使用它呢?一个技术的广泛使用必然有它的道理. 背景与问题 以前一些传统的系统,基本上都是" ...
- SA 复习笔记
大家好,由于蒟蒻 tzc 最近被动态点分治这个学也学不会的毒瘤玩意儿虐得不轻,所以就准备换换脑筋来 Van 同样学也学不会的后缀数组了. 考虑一个非常经典的问题:[模板]后缀排序. 一些定义(very ...
- 一次forEach 中 await 的使用
forEach 和 await/async 的问题 最近在刷面试提的时候看见这样一道题 const list = [1, 2, 3] const square = num => { return ...
- sigma网格中水平压力梯度误差及其修正
1.水平梯度误差产生 sigma坐标系下,笛卡尔坐标内水平梯度项对应形式为 \[\begin{equation} \left. \frac{\partial }{\partial x} \right| ...
- Linux基础——常用命令
find /grep /xargs /sort /uniq /tr /cut /paste /sed /awk......待续...... 1.find 名字查找: find . -name file ...