It seems I am not allowed to edit my own post, so I have to post a new one
It says 'you may edit your posts' at the bottom of the page though...
The title is also not describing my problem anymore - this happens when you think you've found problem but you're proven wrong afterwards. I should have done more testing before posting, sorry. I also noticed my last post got edited?
I accidently posted a slightly wrong version of my code above, this is the version in which the scratchBlock render method does not exist. (simply shrunk it down until there were only two lines of code remaining, then replaced the two references to aScratchObject.render() with the actual code.)
I did not mention it yet, but I really appreciate your help. Hopefully I'll be able to help others on this forum too, on surfaces I am slightly better at
I know JavaScript just enough for creating dynamic forms and pages, but once it comes to this...
And I see I did not describe my script too well, here it goes:
When a new scratchBlock object is created, a piece of HTML is added to the div element scriptEditor.
This new div should be draggable, but it's important to store the css properties as properties of the object for further reference in my project.
aScratchBlock.DOMobj should contain a reference to document.getElementById('theScratchBlock'). To me it seems aScratchBlock.DOMobj does not contain a reference to the HTML element, but somehow a copy of it - I can edit it style properties, it stores them, the div's just don't move...
The last created scratchBlock always works perfectly...
function app_init() {
scratchBlocks = new Array();
scratchBlockId = 0;
scratchBlocks[0] = new scratchBlock();
scratchBlocks[1] = new scratchBlock();
scratchBlocks[2] = new scratchBlock();
scratchBlocks[3] = new scratchBlock();
scratchBlocks[4] = new scratchBlock();
scratchBlocks[5] = new scratchBlock();
scratchBlock_dragging = -1;
testvar = 0
}
function app_mouseMove(event) {
mousex = event.clientX;
mousey = event.clientY;
if (scratchBlock_dragging != -1) {
xpos = scratchBlocks[scratchBlock_dragging].x
ypos = scratchBlocks[scratchBlock_dragging].y
//alert(typeof scratchBlock_dragging + ' ' + xpos + ' ' + ypos);
if (scratchBlock_dragStarted == false) {
//avoid drag on regular click or very slight mouse moves
scratchBlock_dragStarted = (Math.abs(xpos-xdiff-mousex)>2 || (Math.abs(ypos-ydiff-mousey)>2))
} else {
//document.getElementById(scratchBlock_dragging).style.top = (mousey + ydiff) + 'px';
//document.getElementById(scratchBlock_dragging).style.left = (mousex + xdiff) + 'px';
scratchBlocks[scratchBlock_dragging].x = mousex + xdiff;
scratchBlocks[scratchBlock_dragging].y = mousey + ydiff;
scratchBlocks[scratchBlock_dragging].render();
scratchBlocks[scratchBlock_dragging].DOMobj.style.top = this.y + 'px';
scratchBlocks[scratchBlock_dragging].DOMobj.style.left = this.x + 'px';
}
}
}
//scratchBlock Object Definition
//actual object definition
function scratchBlock() {
//Object Properties
this.bid = scratchBlockId;
this.x = 100
this.y = this.bid*50+50;
this.blockType = 'command';
this.color = 'blue';
this.label = 'go to x: [' + Math.round(Math.random()*100) + '] y: [' + Math.round(Math.random()*100) + ']';
this.HTML = '<div class="block ' + this.color + '" id="b'+this.bid+'">' + this.label + '</div>';
document.getElementById('scriptEditor').innerHTML += this.HTML;
this.DOMobj = document.getElementById('b'+this.bid);
//event handling
this.DOMobj.setAttribute('onMouseDown','scratchBlock_initDrag('+this.bid+')');
this.DOMobj.setAttribute('onMouseUp','scratchBlock_dragging = -1 ');
this.DOMobj.setAttribute('onSelectStart','return false'); //avoid text selection on browser other then Mozilla
this.DOMobj.style.top = this.y + 'px';
this.DOMobj.style.left = this.x + 'px';
scratchBlockId ++;
}
function scratchBlock_initDrag(blockId) {
//scratchBlock_dragging an id
scratchBlock_dragging = blockId;
scratchBlock_dragStarted = false;
xdiff = scratchBlocks[blockId].x - mousex;
ydiff = scratchBlocks[blockId].y - mousey;
}