Prev: FAQ Topic - How can I create a Date from a String? (2009-10-05)
Next: Halloween website
From: Don84 on 10 Oct 2009 16:55
On Oct 10, 4:42 pm, Don84 <tatata9...(a)gmail.com> wrote:
> > ...
>
> ...
>
> > Function getEventTarget will find the ev.target or event.srcElement,
> > depending on the browser event model.
>
> > If that target is something that the program is interested in dragging,
> > set the activeDragObject to that.
>
> It looks like I didn't know how to implement the getEventTarget
> function properly.  The code below is not working.  The getEventTarget
> function is at the bottom.
....

Silly me, the functions are not fired... hang on for a sec.

From: Don84 on 10 Oct 2009 17:13
On Oct 10, 4:55 pm, Don84 <tatata9...(a)gmail.com> wrote:
> On Oct 10, 4:42 pm, Don84 <tatata9...(a)gmail.com> wrote:> > ...
>
> > ...
>
> > > Function getEventTarget will find the ev.target or event.srcElement,
> > > depending on the browser event model.
>
> > > If that target is something that the program is interested in dragging,
> > > set the activeDragObject to that.
>
> > It looks like I didn't know how to implement the getEventTarget
> > function properly.  The code below is not working.  The getEventTarget
> > function is at the bottom.
>
> ...
>
> Silly me, the functions are not fired... hang on for a sec.

This is the new code that separate the drag and drop js code into a
separate file and use a reference to it from the calling HTML file.

The html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>move objects </title>
<script type="text/javascript" src="drag_n_drop.js"></script>
</head>

<body>
<div id="test1" style="left:200;top:200;width:50;height:100">Hey me
here</div>
<div id="test2" style="left:300;top:300;width:50;height:100">Hey she
there</div>
</body>
</html>

// the drag_n_drop.js file
// other functions stay put (the way as your wrote)
// the two questionable functions
function getEventCoords(ev) {
// var coords = { x : 0, y : 0 };
var coords = { x : 200, y : 200 };
/* if the above code is the initial value and correct then what
about the div id of "test2"
how do we make that div dragable as well? and what if we have more?
hope I'm wrong and your default to 0 for both x and y is correct
*/

// find e.pageX/e.pageY or
// (e.clientX/e.clientY + scroll offsets);
return coords;
}

function getEventTarget(ev) {
var ev.target = div;
// attempt to make generic, so that all div (s) are dragable
// but not working, I don't know what I'm doing ...
// var target = "test1";
activeDragObject = div;
}

Many thanks.
From: Garrett Smith on 10 Oct 2009 19:30
Don84 wrote:
>> ...
>>
> ...
>> Function getEventTarget will find the ev.target or event.srcElement,
>> depending on the browser event model.
>>
>> If that target is something that the program is interested in dragging,
>> set the activeDragObject to that.
>
> It looks like I didn't know how to implement the getEventTarget
> function properly. The code below is not working.

It was posted as a non-functional outline.

The getEventTarget
> function is at the bottom.

My comments are inline.

>
> Many thanks.
>

You're welcome.

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML is not going to offer an advantage.

With HTML 4 you can remove the extra attributes.

> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>"flowing" objects </title>
> <script type="text/javascript">
> function addDot() {
> var div = document.createElement("div");
> if (div)
> {
>
div.className = "mySpecialClass";

css:
..mySpecialClass {
position: absolute;
/* [...] */
}


> }
>
> // drap and drop to move DIV, credit of Garrett Smith
>

Thanks, but you can remove that. Everyone who is reading this knows that
I'm trying to help. I am not writing the code. I am providing an
outline to try to answer your question.

You are going be the one who writes the actual code.

The outline does not address complications that may arise (iframes),
potentially desirable features (whatever they may be), or optimizations
(mousemove throttle).


Based on what you have, you will need to write:
1) getEventTarget
2) getEventCoords
3) matchesDragCriteria

I explain (1) below. (2) is trickier. (3) defines what is draggable.

> function mousedownHandler(ev) {
> var target = getEventTarget(ev),draggable = findDraggableAncestor
> (target);
> if(draggable) {
> activeDragObject = draggable;
> }
> }
> document.onmousedown = mousedownHandler;
>
> function mousemoveHandler(ev) {
> if(!activeDragObject) return;
> var coords = getEventCoords(ev), ePageX = eventCoords.x, ePageY =
> eventCoords.y,
> distX = ePageX - mousedownX,
> distY = ePageY - mousedownY;
> }
> document.onmousemove = mousemoveHandler;
>
> function mouseupHandler(ev) {
> activeDragObject = null;
> }
> document.onmouseup = mouseupHandler;
>

// if the element the user clicked or one of its ancestors is
// something that can be dragged.
> function findDraggableAncestor(target) {
> var closestAncestor = document.body;
> for(var x = target; x !== closestAncestor; x = x.parentNode) {

// This function is not defined.
> if(matchesDragCriteria(x)) {
> return x;
> }
> return null;
> }
>

// Change this function to decide what can be dragged.
function matchesDragCriteria(el) {
// Function "hasClass" is not defined.
return hasClass(el, "mySpecialClass");
}

// This function needs to be fixed to return the actual event coords,
// right now it just returns {x:100, y:150}. You need the actual coords.
> function getEventCoords(ev) {
> // var coords = { x : 0, y : 0 };
> var coords = { x : 100, y : 150 };
> // find e.pageX/e.pageY or
> // (e.clientX/e.clientY + scroll offsets);
> return coords;
> }
>
> function getEventTarget(ev) {
> var ev.target = div;

No, that should return an HTMLElement. Something like:-
ev = ev || event;
return ev.target || event.srcElement;

[snip rest of code]
--
Garrett
comp.lang.javascript FAQ: http://jibbering.com/faq/
From: Don84 on 11 Oct 2009 11:00
On Oct 10, 7:30 pm, Garrett Smith <dhtmlkitc...(a)gmail.com> wrote:
This is a quick update. I also did some more research for it, and
very anxious to get the basics working first and then figure out
exactly how it works, and yes, have achieved that, very exciting...
thank you so much for getting me started on the right path, will
update if you don't mind.
First  |  Prev  | 
Pages: 1 2
Prev: FAQ Topic - How can I create a Date from a String? (2009-10-05)
Next: Halloween website