drag and drop question

[Matej]

Hello , i found drag and drop tutorial but i didnt get one thing

here is the link - http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx - (if you are too lazy to open it i can copy the code )

 

So back to my question

as first he defines

 var _startX = 0; 

than in mousedown invoking function he redefine it like this

_startX = e.clientX;

so now starX does not equal 0 but location of mouse in X line

and in mousemove invoking function he does this

_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';

1)basicly _offsetX=event.target.style.left;

2)e.clientX = position of mouse in X line

3)_startX = is also position of mouse in Xline;

 

so that means that 1)500+2)1000-3)1000 = 500 , so it shouldnt even move

 

could someone please explain it? or if i got it wrong also explain it , thanks for answers

[Don E]

When you move the mouse, the e.clientX here: _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; changes values resulting in _dragElement.style.left value changing which drags/moves the element.

[niche]

did you consider the html5 approach?

 

http://www.w3schools.com/html/html5_draganddrop.asp

[Matej]

yes , but it does only work for selected elements or?

[niche]

or what?

[Matej]

i mean , you cant move image where you want with that , you can put or drag it to selected area and even you cant move it in that area

Edited August 29, 2014 by Matej

[niche]

right you are. was just asking

[Matej]

When you move the mouse, the e.clientX here: _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; changes values resulting in _dragElement.style.left value changing which drags/moves the element.

i just came back to this , even tho i move mouse , its still the same http://jsfiddle.net/3kksmag5/1/

[Don E]

Change document.onmousemove=ahoj(); to document.onmousemove=ahoj; and see if that works.

[Matej]

Change document.onmousemove=ahoj(); to document.onmousemove=ahoj; and see if that works.

oh:) , thanks for fast answers , but why did it work with "ahoj" and not with "ahoj()"?

//

http://jsfiddle.net/3kksmag5/4/ why does it works only first time? i mean , when "mouseup" and try to drag it again , it doesnt work

Edited September 19, 2014 by Matej

[Ingolme]

In the first case you're telling it the name of the function it has to use when the event happens, in the second case you're actually running the function right on that line and assigning whatever value the function returns to the "onmousemove" property.

[Matej]

In the first case you're telling it the name of the function it has to use when the event happens, in the second case you're actually running the function right on that line and assigning whatever value the function returns to the "onmousemove" property.

Well if first time i tell it , to use ahoj onmousemove , and second time just invoking ahoj with click (if i got it right) , why is chaning of innerHTML working like it should but div aint movin?

[Don E]

Look at this update; http://jsfiddle.net/3kksmag5/10/ See the changes. Use offsetLeft and offsetTop to get left and top values. When setting the left and top in the ahoj function, instead of the left and top margins, set the left and top positions: y.style.left, y.style.top. Also since you're moving the red box div around, make sure to set position to absolute in CSS.

 

Well if first time i tell it , to use ahoj onmousemove , and second time just invoking ahoj with click (if i got it right) , why is chaning of innerHTML working like it should but div aint movin?

 

Hopefully this answers your question.

Edited September 20, 2014 by Don E

[Matej]

Thank you very much , but why is there difference between offsetTop/left and y.style.marginLeft/y,style.left , i mean , why it works second time with offsetTop/left and not with style?

[Ingolme]

The offsetTop and offsetLeft properties are numbers indicating the actual distance in pixels from the top and left of the parent.

 

style.left and style.top only have values if they were set earlier using the element's style attribute or Javascript. They are strings that include a number and a unit, such as "30px".