Javascript Dragging

  • chibuki
  • Novice
  • Novice
  • chibuki
  • Posts: 22

Post 3+ Months Ago

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:
Code: [ Select ]
var OnTop = 5;
var Draggable = new Array("token1","token2","token3","token4");
var DragObj = null;
var DeltaX = 0;
var DeltaY = 0;
function Grab(evt) {
    var evt = (evt) ? evt : ((window.event) ? window.event : null);
    var objectID = (evt.target) ? evt.target.id : ((evt.scrElement) ? evt.scrElement.id : null);
    var isDraggable = false;
    for(i=0;i<Draggable.length;i++)
    {
        if(Draggable[i]==objectID)
        {
            isDraggable = true;
        }
    }
    if(isDraggable)
    {
        DragObj = document.getElementById(objectID)
        DragObj.style.zIndex = ++OnTop;
        DeltaX = evt.clientX - DragObj.offsetLeft;
        DeltaY = evt.clientY - DragObj.offsetTop;
        document.onmousemove = Drag;
        document.onmouseup = LetGo;
    }
}
 
function Drag(evt) {
    if(DragObj == null)
    {
        return;
    }
    var evt = (evt) ? evt : ((window.event) ? window.event : null);
    DragObj.style.left = evt.clientX - DeltaX + "px";
    DragObj.style.top = evt.clientY - DeltaY + "px";
}
 
function LetGo(evt) {
    DragObj = null;
    document.onmousemove = null;
    document.onmouseup = null;
}
 
window.onload = function() {
    document.onmousedown = Grab;
}
 
  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.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • awatson
  • Novice
  • Novice
  • awatson
  • Posts: 20

Post 3+ Months Ago

I haven't tried this before, looks like an interesting problem...

I think you're missing the next layer you'd need to make it work, mainly the x/y coordinates for each piece when it's in its correct position.

Once you have that listed for each piece somehow, then you can make it "click" to those positions when the piece is within a set distance of it. There's a formula for that.

http://en.wikipedia.org/wiki/Distance

So basically in LetGo you'd call a function to compare the pieces position when it was let go with it's correct position. If the distance is under the preset required distance, move it to the correct x/y coords. And I guess lock it so it can't be accidentally moved or something.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.