drag.js
// JavaScript Document
//B开发
define(function(require,exports,module){
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;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
//L = require(‘./range.js‘).range(L , document.documentElement.clientWidth - obj.offsetWidth , 0);
//T = require(‘./range.js‘).range(T , document.documentElement.clientHeight - obj.offsetHeight , 0);
obj.style.left = L + ‘px‘;
obj.style.top = T + ‘px‘;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.drag = drag;
});
main.js
// JavaScript Document
//A开发
define(function(require,exports,module){
var oInput = document.getElementById(‘input1‘);
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oDiv3 = document.getElementById(‘div3‘);
require(‘./drag.js‘).drag(oDiv3);
oInput.onclick = function(){
oDiv1.style.display = ‘block‘;
require(‘./scale.js‘).scale(oDiv1,oDiv2);
};
});
range.js
// JavaScript Document
define(function(require,exports,module){
function range(val , max , min){
if( val > max ){
return max;
}
else if( val < min ){
return min;
}
else{
return val;
}
}
exports.range = range;
});
scale.js
// JavaScript Document
//C开发
define(function(require,exports,module){
function scale(obj1,obj2){
var downX = 0;
var downY = 0;
var downW = 0;
var downH = 0;
obj2.onmousedown = function(ev){
var ev = ev || window.event;
downX = ev.clientX;
downY = ev.clientY;
downW = obj1.offsetWidth;
downH = obj1.offsetHeight;
document.onmousemove = function(ev){
var ev = ev || window.event;
var W = ev.clientX - downX + downW;
var H = ev.clientY - downY + downH;
W = require(‘./range.js‘).range(W , 500 , 100);
H = require(‘./range.js‘).range(H , 500 , 100);
obj1.style.width = W + ‘px‘;
obj1.style.height = H + ‘px‘;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.scale = scale;
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; right:0; bottom:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script src="../sea/sea.js"></script>
<script>
//A开发
seajs.use(‘./main.js‘);
</script>
</head>
<body>
<input type="button" value="弹窗" id="input1">
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
时间： 2024-12-20 08:29:06