js鼠标拖动元素移动

拖动元素移动

 var odiv = document.getElementsByTagName('div')[0];//给需要移动的元素添加onmousedown事件odiv.onmousedown = function (ev) {var event = window.event || ev;// 获取屏幕中可视化的宽高的坐标var dx = event.clientX - odiv.offsetLeft; var dy = event.clientY - odiv.offsetTop;console.log(event);console.log(dy)//实时改变目标元素odiv的位置document.onmousemove = function (ev) {var event = window.event || ev;odiv.style.left = event.clientX - dx + 'px';odiv.style.top = event.clientY - dy + 'px';}//抬起停止拖动document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}}

效果图

js鼠标拖动元素移动相关推荐

Vue实战教程：利用自定义实现鼠标拖动元素效果
一淘模板分享一个Vue实战,介绍下使用Vue的自定义指令实现鼠标拖动元素的效果以及解决移动端适配的问题. 核心属性 Element.clientWidth:元素可视宽度. Element.client ...
js 实现拖动元素到任意位置
一.实现效果二.实现代码主要通过原生的 mousedown 和 mouseup 以及mouseleave 事件实现 <!DOCTYPE html> <html lang=&quo ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
JQuery实现鼠标拖动元素移动位置
JQuery实现元素移动位置有很多种方法,其中一个是根据鼠标在指定区域内随意移动,还有一种的是根据方向键在一定区域内上下左右平移.这二种只能说各有优劣,通过方向键平移,实现相对简单,操作也更具备可控性 ...
H5鼠标拖动事件（drag）
H5鼠标拖动事件一.元素拖动二.相关事件 1.拖拽元素 (1)dargstart (2)drag (3)dragend 2.目标元素 (1)drop (2)dragover (3)dragente ...
php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
如果您想插件实现,如下链接:better-scroll better-scroll | :scroll: inspired by iscroll, and it supports more featu ...
html实现鼠标移动波纹效果,js实现拖动滑块和点击水波纹效果
本篇文章就给大家介绍js实现拖动滑块效果和点击水波纹效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 拖动滑块效果: 先看看效果图: Document input[type ...
js拖拽之二：实现拖动元素上下左右改变元素大小
具体原理参考 js拖拽一 <script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = ...

js鼠标拖动元素移动

拖动元素移动

js鼠标拖动元素移动相关推荐

最新文章

热门文章