Assignment 3 guidance
This post will help you complete BTI220 Assignment 3.
.
Assignment 3 learning objectives
I would like you to learn a thought process as you work on Assignment 3.
One of the most important things that you will learn in this Software Development program is how to solve problems. (I use the word “problem” in the generic sense, knowing that it also includes the idea of an “opportunity”.)
Problem-solving does not come naturally to some people, but you may have developed some problem-solving techniques in other areas of your life. In this course, and in others in the program, you will learn and develop problem-solving techniques.
I would also like you to learn how to create an algorithm, which will become an intermediate result located between the assignment specifications, and your programming code.
One of the worst things that you can do, as a new programmer, or even as an experienced one, is to jump directly into coding right after the problem has been defined. Doing this robs you of the ability to really think about the problem and its possible solutions. When you are able to make the time to think about the problem, before opening your programming code editor, you are able to be creative and more comprehensive, because you aren’t shackled by programming language syntax.
.
Creating an algorithm
One way to create an algorithm is to write it out, pencil on paper. Alternatively, you can use an editor, like Notepad/TextEdit, or even a programmer’s editor. If you use a programmer’s editor, I would suggest that you can use programming language comment syntax to write out your algorithm.
For example, if you are designing a web page that has a number of layout regions, you could open your HTML code editor, and enter HTML comments that capture your ideas. For example:
<!– content area, will have a left-side local navigation, and a content display area –>
When you are working on CSS rules, use the same technique. For example:
/* Content area layout rules; id selectors will describe the dimensions etc. */
Finally, when you are planning your JavaScript programming, you can – and should – use the same technique. For example:
// Mouse events that we’re interested in…
// We’re only interested if the mouse button is down
.
How is Assignment 3 different from the “basics” example?
The drag-and-drop basics example showed you how to create draggable objects. You were able to drag an object anywhere on the page.
The important difference with Assignment 3 is that the target location for the drop will be limited – you won’t be able to drop an object anywhere.
Instead, it will “snap” into position, within another container. How do we do this?
Well, in the basics example, you set the object’s left and top edge values.
In Assignment 3, you’ll do something different. You will modify the DOM tree, and place the object in the container’s hierarchy. For example, if the container had four objects, and you were dragging the first object down towards the bottom of the container, it can only go between #2 and #3, or between #3 and #4, or at the bottom.
Therefore, we will be interested in DOM methods that enable us to do this, including:
- appendChild
- replaceChild
- childNodes
- cloneNode
- insertBefore
.
Let’s get to work
OK… you know the basic specifications. You would expect that you will be building on the foundational ideas of last week’s drag-and-drops basics presentation, and you would be right.
Looking ahead, after you’ve completed Assignment 3, you’ll find that there’s probably only about 50 lines of relevant code in your program, plus another 100 to 200 lines of housekeeping code, comments, and so on.
As stated earlier, the important thing is to learn a thought process that will help you with this assignment, and with your work in other programming courses now and in the future.
So, what do we need in our program? The rest of this post answers this question, but here’s a summary:
- We need some global variables to track state and hold work in progress; these will be used by all of our functions
- We probably need to do some initialization tasks after the page loads
- We’ll be interested in the mouse pointer location here and there, so we may want to create a dedicated function that will keep track of that
- Finally, we’ll be interested in functions that will act on the mouse events that enable drag and drop
I’ll provide the algorithm for your JavaScript program; download it from here (as plain text).
.
Global variables/objects for our program
We should have an object that stores the current mouse pointer location. You must use object literal syntax to get this done.
Updating the values of this object will be done at the appropriate time. Accessing (using) the values of this object can be done at any time by any of our functions.
It seems to me that we also want to keep track of certain states and operations, so we may need to specify one or more variables for that.
Finally, we’ll need some objects that will be used as we move divs around. If you think about the problem, you know that we’ll probably need a div for 1) the div we’re dragging, 2) the div/location we want to drag to, and 3) the container div it will be dropped into.
The important idea here is to be flexible, but plan what you can.
.
Page initialization
Most programs require some initialization, so it seems obvious that we’ll need some here.
The important idea here is to create an initializer function, and think about when you will call it (i.e. typically at the bottom of the page body).
.
Where is the mouse pointer?
You will need to know the location of the mouse pointer.
You’ve already seen (and probably implemented) an example, from last week’s drag-and-drop basics topic. It reports the current X and Y position, relative to the browser’s viewport.
For this assignment, I can give you the following code to use in your program. As you can see, it will also track the X and Y mentioned above, and it will track the X and Y relative to the document’s upper-left origin.
function mouseLocation(e) {
// This function populates the 'mouseLoc' global object
// Cross-browser compatibility - e = most browsers || IE
e = e || window.event;
// Get X and Y relative to the browser viewport
mouseLoc.browserX = e.clientX;
mouseLoc.browserY = e.clientY;
// Get X and Y relative to the document's top-left corner
mouseLoc.docX = e.pageX || e.clientX + document.documentElement.scrollLeft;
mouseLoc.docY = e.pageY || e.clientY + document.documentElement.scrollTop;
}
.
What mouse events are we interested in?
For drag-and-drop, you know (from the basics example) that you are interested in mouse down, move, and up. For Assignment 3, we are also interested in mouse over, so that we can determine whether we are currently over top of a drop “target”.
Each mouse event will be assigned as a handler for a browser event (just like in last week’s “basics” example).
.
Mouse event – onmousedown
This handler is similar to the one in the “basics” example.
The only additional task would be to begin tracking the state of some objects, including the div that was just clicked, and its siblings.
.
Mouse event – onmousemove
This handler begins in a similar way to the “basics” example.
A useful – and easy – thing to do is to give the user a visual clue that an object is being dragged. A popular way is to display a copy of the div that’s being dragged below or to the right of the mouse pointer. For example, iGoogle shows you the object being dragged below the cursor, and fades it a bit.
There are probably a couple of ways to do this. They require you to use the global variable intended for this purpose, and the mouse pointer location. An easy way is to copy the “innerHTML” of the div being dragged to the same property of the div copy.
Now, we move on to the challenging task – preparing to drop the div that’s being dragged. A useful thing to do is to give the user a visual clue that shows a placeholder in the proposed drop location.
To do this, you must understand and be able to visualize a DOM hierarchy. Repeating the example from above, you may have a div container that holds four div layout regions. As you drag the first object down, you need to be able to compare the mouse pointer position with the other objects in the container.
Where’s the proposed drop position? Above the current mouse pointer position? Above, only if the mouse pointer is over the top half of the object under the mouse pointer (and if it is in the bottom half, then below the object under the mouse pointer)? You decide on the rule you want to follow, and then implement it. Your handler must be able to determine the proposed drop position as the user drags an object.
When you can determine this, then you can modify the DOM. As the user drags, you can configure the global variable for this purpose, and place it in the DOM.
.
Mouse event – onmouseover
This function will help us keep track of whether we’re over a drop target.
Your page may have one or more drop targets. When the mouse pointer is on top of a drop target, this function should update (a) global variable(s) with this information.
Then, you can use the information to make proposed, or actual, drop decisions.
Mouse event – onmouseup
We’re interested in this function when the user releases the mouse button after a click-and-drag operation. This function will implement the “drop” action.
In the basics example, the left and top edge of the div that was being dragged were set to the current mouse pointer location. As noted earlier, we need different behaviour for Assignment 3.
In your onmousemove handler/function, you created a proposed drop location. In this function, you will update the DOM, but only if the mouse pointer is on top of a drop target. Also, you need to perform some housekeeping, by making the div copy invisible, and setting state (variables) to initial values.
Summary
I believe that the key to success for Assignment 3 is its problem-solving thought process. If you think through the problem first, before you begin coding, you will be able to make progress.
Good luck!
.
Peter McIntyre 