DnD要素のこのコードがあります。特定の要素に対して機能します。ただし、すべての div で機能するようにしたいと考えています。move関数に「this.id」を参照できません。私はそれを機能させるために欠けているものはありません。
window.addEventListener('load', init, false);
function init(){
//just one element
/* box = document.getElementById('div1');
box.addEventListener('mousedown', startMoving, false);
box.addEventListener('mouseup', stopMoving, false);*/
//all element?
box = document.getElementsByTagName('div');
for (i=0;i<box.length;i++) {
box[i].addEventListener('mousedown', startMoving, false);
box[i].addEventListener('mouseup', stopMoving, false);
}
}
function startMoving(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
a = document.getElementById(this.id);
divTop = parseInt(a.style.top),
divLeft = parseInt(a.style.left);
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
move(this.id,aX,aY);
}
}
function stopMoving(){
document.onmousemove = function(){}
}
function move(divid,newX,newY){
var a = document.getElementById(divid);
a.style.left = newX + 'px';
a.style.top = newY + 'px';
}
これを作るより良い方法はありますか?