- PR -

[JavaScript]範囲内でドラッグ＆ドロップしたい

«前のページへ 1|2
投稿者投稿内容
ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-02 17:58
お世話になります。
まだまだ怪しい挙動満載ですが一応それらしく動作するようになりましたので
報告いたします。ありがとうございました。


<html>
<head>
<title>DragDrop Sample</title>
<script type="text/javascript">

<!--
var obj;
var offsetX;
var offsetY;
var moveDIV;

onload=function () {
moveDIV= document.getElementById("ko")
moveDIV.onmousedown = onMouseDown;
moveDIV.onmousemove = onMouseMove;
moveDIV.onmouseup = onMouseUp;
}
function onMouseDown(e) {
obj = this;

offsetX = event.offsetX + 2;
offsetY = event.offsetY + 2;

return false;
}
function onMouseMove(e) {
if (!obj) { return true;
} else {
obj.style.left = Xpos();
obj.style.top = Ypos();
return false;
}
}
function onMouseUp(e) {
obj = null;
}

function Xpos() {
var XoyaPos = document.getElementById("oya");
var XkoPos = document.getElementById("ko");
var XcurPos = event.clientX - offsetX + document.body.scrollLeft - document.getElementById("oya").offsetLeft ;

//大
if (XcurPos > XkoPos.offsetWidth + XoyaPos.offsetLeft) {
return XkoPos.offsetWidth + XoyaPos.offsetLeft;
}
//小
if (XcurPos < - XkoPos.offsetWidth) {
return - XkoPos.offsetWidth;
}
return event.clientX - offsetX + document.body.scrollLeft - XoyaPos.offsetLeft;

}


function Ypos() {
var YoyaPos = document.getElementById("oya");
var YkoPos = document.getElementById("ko");
var YcurPos = event.clientY- offsetY + document.body.scrollTop - document.getElementById("oya").offsetTop ;

//大
if (YcurPos > YoyaPos.offsetHeight ) {
return YoyaPos.offsetHeight ;
}
//小
if (YcurPos < - YkoPos.offsetHeight) {
return - YkoPos.offsetHeight;
}
return event.clientY - offsetY + document.body.scrollTop - YoyaPos.offsetTop;

}
-->
</script>

</head>
<body>
<div id="oya" style="position:absolute; height: 600px;width: 600px;top:100px; left:300px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">
<div id="ko" style="position:absolute; height: 300px;width: 300px; top:0px; left:0px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;">
test
</div>
</div>

</body>
</html>
«前のページへ 1|2

スキルアップ／キャリアアップ（JOB@IT）