您的位置：首页 > Web前端 > JavaScript

JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制

2016-05-27 13:37 537 查看

知识点总结：

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;
})

参考：http://study.163.com/course/courseLearn.htm?courseId=717031#/learn/video?lessonId=900193&courseId=717031

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航