这是很简单的js拖拽方法

var funDrag = function(element, callback) {callback = callback || function() {};var params = {left: 0,top: 0,currentX: 0,currentY: 0,flag: false};//获取相关CSS属性var getCss = function(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     };//拖拽的实现if(getCss(element, "left") !== "auto"){params.left = getCss(element, "left");}if(getCss(element, "top") !== "auto"){params.top = getCss(element, "top");}//o是移动对象element.onmousedown = function(event){params.flag = true;event = event || window.event;params.currentX = event.clientX;params.currentY = event.clientY;};document.onmouseup = function(){params.flag = false;    if(getCss(element, "left") !== "auto"){params.left = getCss(element, "left");}if(getCss(element, "top") !== "auto"){params.top = getCss(element, "top");}callback();};document.onmousemove = function(event){event = event || window.event;if(params.flag){var nowX = event.clientX, nowY = event.clientY;var disX = nowX - params.currentX, disY = nowY - params.currentY;element.style.left = parseInt(params.left) + disX + "px";element.style.top = parseInt(params.top) + disY + "px";}}
};

这是很简单的js拖拽方法相关推荐

html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址下载地址
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
js拖拽库——Sortable.js
Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中.不依赖jQuery.支持 Meteor.AngularJS.React.Vue.K ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
解决JS拖拽出现的问题
解决JS拖拽出现的问题参考文章: (1)解决JS拖拽出现的问题 (2)https://www.cnblogs.com/yuanjingjing/p/10154198.html 备忘一下.

这是很简单的js拖拽方法

这是很简单的js拖拽方法相关推荐

最新文章

热门文章