JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制
知识点总结：
Sea.js的使用：define、export、seajs.use、require等方法； 参考：http://seajs.org/docs/
Sea.js与require.js的区别；
鼠标事件及位置的使用：mousedown、mousemove、mouseup、ev.clientX、ev.clientY；
初始化模块、拖拽模块、缩放模块、范围限制模块的实现。
一、index页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化：拖拽、缩放及范围限制</title>
<style>
*{ margin: 0; padding: 0; }
body{ padding: 10px; }
.div1{ width: 300px; height: 300px; background-color: red; position: absolute; left: 10px; top: 40px; display: none; }
.div1 .div2{ width: 30px; height: 30px; background-color: yellow; position: absolute; right: 0; bottom: 0; cursor: nw-resize; }
.div3{ width: 150px; height: 150px; background-color: blue; position: absolute; right: 0; top: 0; }
</style>
</head>
<body>
<input type="button" value="弹框" id="btn1">
<div class="div1" id="div1">
<div class="div2" id="div2"></div>
</div>
<div class="div3" id="div3"></div> <script src="./js/sea.js"></script>
<script>
seajs.use('./js/main.js',function(exp){
exp.init();
});
</script>
</body>
</html>
二、初始化模块：main.js
define(function(require,exports,moduel){
// 初始化
function init() {
var oBtn = document.getElementById('btn1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oBtn.onclick = function(){
oDiv1.style.display = 'block';
}
// 引用拖拽模块
require('./drag.js').drag(oDiv3);
//引用缩放模块
require('./scale.js').scale(oDiv1,oDiv2);
}
exports.init = init;
})
三、拖拽模块：drag.js
define(function(require,exports,moduel){
// 定义拖拽方法
function drag(obj){
var disX = 0;
var disY = 0;
// 鼠标按下事件
obj.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
//解决ie8以下版本中，obj里面有文字选中时的bug
if(obj.setCapture){
obj.setCapture();
}
// 鼠标按下并移动事件
document.onmousemove = function(ev){
var ev = ev || window.event;
// 引用范围限制模块
var L = require('./range_limit.js')
.rangeLimit(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0);
var T = require('./range_limit.js')
.rangeLimit(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0);
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
// 鼠标抬起事件
document.onmouseup = function(){
document.onmousemove = null;
document.onmousedown = null;
//解决ie8以下版本中，obj里面有文字选中时的bug
if(obj.releaseCapture){
obj.releaseCapture();
}
}
// 解决obj是图片时拖拽出现两个图片的bug
return false;
}
}
exports.drag = drag;
})
四、缩放模块：scale.js
define(function(require,exports,moduel){
// 定义缩放方法
function scale(parentarea, subarea) {
var disW = 0, //定义缩放对象的起始宽度
disH = 0, //定义缩放对象的起始高度
startX = 0, //定义缩放滑块区域的起始X坐标
startY = 0; //定义缩放滑块区域的起始Y坐标
// 鼠标按下事件
subarea.onmousedown = function(ev){
var ev = ev || window.event;
// 赋值
disW = parentarea.offsetWidth;
disH = parentarea.offsetHeight;
startX = ev.clientX;
startY = ev.clientY;
// 鼠标按下并移动事件
document.onmousemove = function(ev){
var ev = ev || window.event;
// 引用范围限制模块
var W = require('./range_limit.js').rangeLimit(ev.clientX - startX + disW ,600 , 100);
var H = require('./range_limit.js').rangeLimit(ev.clientY - startY + disH , 600 , 100);
parentarea.style.width = W + 'px';
parentarea.style.height = H + 'px';
}
// 鼠标抬起事件
document.onmouseup = function(){
document.onmousemove = null;
document.onmousedown = null;
}
return false;
}
}
exports.scale = scale;
})
五、范围限制模块：range_limit.js
define(function (require,exports,moduel) {
//定义范围限制方法
function rangeLimit(currange, maxrange, minrange){ //currange:当前位置 maxrange：最大位置 minrange：最小位置
if(currange > maxrange){
currange = maxrange;
}
if (currange < minrange){
currange = minrange;
}
return currange;
}
exports.rangeLimit = rangeLimit;
})
JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制的更多相关文章
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- jquery.js与sea.js综合使用
jquery.js与sea.js综合使用 目录 模块定义 define id dependencies factory exports require require.async require. ...
- require.js与sea.js的区别
hi,感谢各位读者能够阅读我的文章. 下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书 ...
- require.js和sea.js的区别
下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁 ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
- Vue富文本编辑器（图片拖拽缩放）
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- 利用插件（jQuery-ui.js）实现表格行的拖拽排序
template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...
- JavaScript模块化编程之require.js与sea.js
为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...
随机推荐
- VBA基础之Excel VBA 表格的操作(一)
一.Excel VBA 表格的操作1. Excel表格的指定以及表格属性的设置 Sub main() '把表格B2的值改为"VBA Range和Cells函数" Range(&qu ...
- Python中变量名里面的下划线
1 变量名前后都有两个下划线(__X__),表示是系统级变量: 2 变量名前只有一个下划线(_X),表示该变量不是由from module import *导入进来的: 3 变量名前有两个下划线(__ ...
- 【转】c++面试基础
1,关于动态申请内存 答:内存分配方式三种: (1)从静态存储区域分配:内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在. 全局变量,static变量. (2)在栈上创建:在执行函 ...
- vim编辑器配置及常用命令
最近工作不安分, 没有了刚入行时候的锐气, 不知道什么时候开始懈怠起来, 周末在电脑旁边看新闻, 搞笑图片, 追美剧, 一坐就是一天, 很是空虚. 我需要摆脱这种状态, 正好想学习一下安卓底层, An ...
- 第二次作业（1001.A+B Format (20)）
代码文件及题目描写已放至此 一开始看题目的时候有点没看懂,要求把数分组是什么意思.如果只是单纯的a+b的话是不可能的,所以关于这一点犹豫了很久.本来以为是指把a,b,以及它们的和c各建一个数组,但只输 ...
- catalan卡塔兰数
令h(0)=1,h(1)=1,卡塔兰数数满足递归式:h(n)= h(0)*h(n-1) + h(1)*h(n-2) + ... + h(n-1)h(0) (其中n>=2),这是n阶递推关系;还可 ...
- Java中的线程的优先级
Java 中线程优先级简介: 1. Java 提供一个线程调度器来监控程序中启动后进入就绪状态的所有线程. 按照线程的优先级决定应该调度哪个线程来执行. 2. 线程的优先级用数字表示, 范围从 1 到 ...
- ios::sync_with_stdio(false)提高C++读写速度
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:ios::sync_with_stdio(false)提高C++读写速度 本文地址:h ...
- 性能分析Linux服务器CPU利用率（转）
1. 指标范围 1.1 User mode CPU utilization+ System mode CPU utilization 合理值:60-85%,如果在一个多用户系统中us+sy时间超过 ...
- IDEA编译的JAR包运行出现“没有主清单属性”
运行编译好的包出现: 解决方案就是: 确保MANIFEST.MF文件在src/main/resources/META_INF/而不是src/main/java/META_INF/