Javascript Dragging??? - Web Design Forum Graphic Design Site Templates Flash CSS Discussions

rose19 · #1 06-04-2009, 07:43 AM

Hello, I'm practicing on this Javascript dragging function.
Here's a mock up site I have for it: http://chibuki.comze.com/test/index.html (the css file)
Hello, I'm practicing on this Javascript dragging function.
Here's a mock up site I have for it: http://chibuki.comze.com/test/index.html (the css file)

So far I got it to work, but how can I make it so that those puzzle pieces can "snap" into the big box? Let's say, when I drag it about 15 pixels away from the "destination#" div, the puzzle piece will snap in and it can't be moved anymore. Can anyone help please?

This is my current script:
Line number On/Off
Code: Select all

Quote:

1. var OnTop = 5;
2. var Draggable = new Array("token1","token2","token3","token4");
3. var DragObj = null;
4. var DeltaX = 0;
5. var DeltaY = 0;
6. function Grab(evt) {
7. var evt = (evt) ? evt : ((window.event) ? window.event : null);
8. var objectID = (evt.target) ? evt.target.id : ((evt.scrElement) ? evt.scrElement.id : null);
9. var isDraggable = false;
10. for(i=0;i<Draggable.length;i++)
11. {
12. if(Draggable[i]==objectID)
13. {
14. isDraggable = true;
15. }
16. }
17. if(isDraggable)
18. {
19. DragObj = document.getElementById(objectID)
20. DragObj.style.zIndex = ++OnTop;
21. DeltaX = evt.clientX - DragObj.offsetLeft;
22. DeltaY = evt.clientY - DragObj.offsetTop;
23. document.onmousemove = Drag;
24. document.onmouseup = LetGo;
25. }
26. }
27.
28. function Drag(evt) {
29. if(DragObj == null)
30. {
31. return;
32. }
33. var evt = (evt) ? evt : ((window.event) ? window.event : null);
34. DragObj.style.left = evt.clientX - DeltaX + "px";
35. DragObj.style.top = evt.clientY - DeltaY + "px";
36. }
37.
38. function LetGo(evt) {
39. DragObj = null;
40. document.onmousemove = null;
41. document.onmouseup = null;
42. }
43.
44. window.onload = function() {
45. document.onmousedown = Grab;
46. }
47.

gkumar · #2 06-22-2009, 10:32 AM

JavaScript excels at modifying the DOM of a Web page, but we usually only do simple things with it, such as creating image rollovers, making tabs, etc. This article is going to show you how to create items on your page that you can drag and drop.

There are several reasons you might want to encorporate this drag and drop ability into your Web pages. One of the simplest reasons is to reorganize Data. As an example, you might want to have a queue of items that your users can reorganize. Instead of putting an input or select box next to each item to represent its order, you could make the entire group of items draggable. Or perhaps you want to have a navigation window on your site that can be moved around by your users. Then there's always the simplest reason: because you can!

There's really not much involved with dragging an item around on your Web page. First we have to know where the mouse cursor is, second we need to know when the user clicks on an item so that we know we should be dragging it, and finally we need to move the item.