JavaScript 拖拽功能

JavaScript 拖拽功能 - Web前端工程师面试题讲解

拖动图片

<img draggable="true">

一开始 html 页面

<style>#placedArea {width: 500px;height: 500px;border: 3px solid rgb(122, 187, 230);}
</style><div class="outer"><div id="placedArea"></div><img draggable="true" src="./aimg.jpg" alt="a" style="width: 20%;"><img draggable="true" src="./aimg.jpg" alt="b" style="width: 20%;"><img draggable="true" src="./bimg.jpg" alt="c" style="width: 20%;"><img draggable="true" src="./bimg.jpg" alt="d" style="width: 20%;">
</div>

拖动时

开始 dragstart
进行中 drag
结束 dragend

// 没有进行拖拽中，会显示
document.addEventListener('dragstart', e => {console.log('开始拖拽');
}, false)// ----------------------------------------------------------------------------------------------// 首先显示
document.addEventListener('drag', e => {console.log('进行拖拽中');
}, false)// 结束时显示
document.addEventListener('dragend', e => {console.log('结束拖拽');
}, false)

进入区域

进入时 dragenter
进入后 dragover
离开 dragleave
放置 drop

const placedArea = document.getElementById('placedArea')// 没有进入放置区域后，会显示
placedArea.addEventListener('dragenter', e => {console.log('进入放置区域时');
}, false)// ----------------------------------------------------------------------------------------------// 首先显示
placedArea.addEventListener('dragover', e => {console.log('进入放置区域后');e.preventDefault()
}, false)// 第二显示
placedArea.addEventListener('dragleave', e => {console.log('离开放置区域');
}, false)// ----------------------------------------------------------------------------------------------// 默认不会显示， 在 进入放置区域后 添加 e.preventDefault()  会覆盖 离开放置区域 显示
placedArea.addEventListener('drop', e => {console.log('放置放置区域');
}, false)

拖拽到指定位置

const placedArea = document.getElementById('placedArea')
let altName//-------------------------------------- ------ 拖拽的设置---------------------------------
// 拖拽开始时
document.addEventListener('dragstart', e => {// target：获取触发特定事件的元素altName = e.target.alt
}, false)// 拖拽时,图片和放置区域边框发生变化
document.addEventListener('drag', e => {e.target.style.border = '5px dashed pink'placedArea.style.border = '5px dashed green'
}, false)// 拖拽结束后，,图片和放置区域边框恢复到默认
document.addEventListener('dragend', e => {e.target.style.border = 'none'placedArea.style.border = '3px solid rgb(122, 187, 230)'
}, false)//--------------------------------- ----------- 放置区域的设置-------------------------------------
// 进入放置区域时
placedArea.addEventListener('dragenter', e => {// 如果放置区域内有节点，就去除if (placedArea.firstChild) {placedArea.removeChild(placedArea.firstChild)}
}, false)// 进入放置区域后，浏览器默认，不能在拖拽以后进行设置，因此需要取消默认行为
placedArea.addEventListener('dragover', e => {e.preventDefault()
}, false)// 鼠标松开放置时，发生的事件
placedArea.addEventListener('drop', e => {if (document.querySelector(`img[alt=${altName}]`)) {// 根据 altName 将图片追加到 placeAreae.target.appendChild(document.querySelector(`img[alt=${altName}]`))}
}, false)

移动图片

<style>img[src='./aimg.jpg'] {position: absolute;border: 3px solid rgb(122, 187, 230);}
</style><div class="outer"><img draggable="false" src="./aimg.jpg" alt="a" style="width: 20%;">
</div>

const movePic = document.querySelector("img[alt = 'a']")movePic.addEventListener('mousedown', e => {// movePic.offsetLeft :  图片左边的 x 轴const beforemovePicLeft = movePic.offsetLeftconst beforemovePicTop = movePic.offsetTop// pageX：鼠标的 x 轴  const beforeMouseDisX = e.pageXconst beforeMouseDisY = e.pageYfunction moving(e) {// 现在的鼠标坐标轴 + 之前的距离 - 之前的鼠标坐标轴movePic.style.left = e.pageX + beforemovePicLeft - beforeMouseDisX + 'px'movePic.style.top = e.pageY + beforemovePicTop - beforeMouseDisY + 'px'}// 添加鼠标事件document.addEventListener('mousemove', moving, false)document.addEventListener('mouseup', e => {// 当鼠标抬起时，移除名为 moving 的鼠标事件document.removeEventListener('mousemove', moving)}, false)}, false)

JavaScript 拖拽功能相关推荐

功能强大的JavaScript 拖拽库 SortableJS
功能强大的JavaScript 拖拽库 SortableJS 官网:http://www.sortablejs.com/ 示例: 配置项: var sortable = new Sortable(el ...
html制作网易云音乐登录系统,JavaScript实现[网易云音乐Web站登录窗口]拖拽功能...
说明你可能发现有很多网站他们的登录窗口或者说是登录框是可以拖动的, 更有甚者他们的站点提示框都可以拖动, 你也许可能会对这个功能的实现感兴趣, 那么这篇文章可能会对你有所帮助!具体的网站示例以网易 ...
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...
css元素可拖动,使用css-transform实现更好的拖拽功能
拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用transform来实现这一功能. 一.拖拽的用户行为分析与原理解析二.代码实现三.总结本文所涉及的 ...
bootstrap拖动div_BootStrap modal实现拖拽功能
bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下在使用modal时首选需要引用js // 完成拖拽功能 // 完成Modal 编辑Html代码 Boo ...
jQuery UI 拖拽功能
原文地址:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html JQuery UI是JQuery官方支持的WebUI 代码库, ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
使用 css-transform 实现更好的拖拽功能
拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用 transform 来实现这一功能. 拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗& ...
简易而又灵活的Javascript拖拽框架（五）
====================================================== 注:本文源代码点此下载 ================================= ...

JavaScript 拖拽功能

拖动图片

拖动时

进入区域

拖拽到指定位置

移动图片

JavaScript 拖拽功能相关推荐

最新文章

热门文章