Frame Glider

Frame Glider is also listed on the projects page

Contents

  1. What is Frame Glider ?
  2. Demo
  3. Features
  4. Browser Support
  5. Requirements and Limitations
  6. Documentation
    1. FG_Unit
    2. FrameGlider.addDraggableUnit / FrameGlider.removeDraggableUnit
    3. FrameGlider.addDroppableUnit / FrameGlider.removeDroppableUnit
    4. FrameGlider.addPointOfInterestUnit / FrameGlider.removePointOfInterestUnit
    5. FrameGlider.getDisabledStatus / FrameGlider.setDisabledStatus
    6. FrameGlider.droppedOnNothing
    7. FrameGlider.ignoreFrames
    8. FrameGlider.mouseFollower
  7. License

What is Frame Glider ?

Most javascript libraries include some kind of drag and drop facility. However, I couldn’t find any library that supported drag and drop across frames on the same web page. Frame Glider is a javascript library which enables you to drag and drop elements from one frame to another within your browser. It provides a reasonable set of features while working within most of the popular browsers. However, it does have some requirements and limitations which you should be aware of. If you like it, you will find the license flexible enough to use it in almost any project.

Demo

Simple Demo: This is a simple demo with a few frames, droppables, draggables and points of interest.

Complex Demo: This is a more complex demo with many movable and nested frames, droppables, draggables and points of interest. It changes the mouse follower image based on the kind of element the mouse is over. You can also enable and disable drag and drop for the entire page or individual units using the checkboxes. It uses the prototype windows library.

Frame as a droppable: This demo attempts to make an entire frame a droppable. It also shows how a droppable always gets precedence over a draggable and a point of interest. The frame as a droppable effect is acheived by making document.body the droppable. If the document body takes up the entire page of the frame, the end effect is almost as if the frame is a droppable.

Features

  1. Choose any element on the top frame to follow the mouse
  2. Choose any element as a draggable, droppable or point of interest
  3. Draggables support mousedown, mouseover and mouseout events
  4. Droppables support mouseup, mouseover and mouseout events
  5. Points of interest support mouseover and mouseout events
  6. Disable and enable all drag and drop with just one function call
  7. Callback for case when the draggable was not dropped on any droppable

Browser Support

Internet explorer 6+
FireFox 1.5+
Opera 9.5+
Safari
Google Chrome

Requirements and Limitations

  1. All frames must have a name attribute: I will try to change to using the window object instead of window.name in future versions so that this requirement is removed.
  2. All frames must be loaded from the same domain: For security reasons, browsers will not allow two frames loaded from different domains to fully communicate with each other (for more information, see http://en.wikipedia.org/wiki/Same_origin_policy). Therefore, Frame Glider will not be able to communicate with some frames and will fail.
  3. All frames must include the frameGlider.js script: You can exclude frames from ths requirement using the FrameGlider.ignoreFrames, but the mouseFollower will not follow the mouse over that frame.
  4. Overlapping frames must have unique z-index values: If overlapping frames don’t have unique z-index values, Frame Glider will not know which is the topmost frame in case a draggable is dropped on the overlapping area and will fail.
  5. Droppables have higher precedence than Points of interest which in turn have higher precedence than Draggables: If droppables, draggables and points of interest overlap, when the mouse is in the overlapping area, mouseover and mouseout events will fire for only one of the elements based on the above precedence. However, you will always be able to start dragging a Draggable irrespective of the precedence.

Documentation

FG_Unit

Draggables, Droppables and Points of interest are called Units. They can be described using FG_Unit. The functions called when each event fires are passed the unit due to which the event was fired.

1 new FG_Unit(element, {
2     mouseDownCallback: functionName,
3     mouseUpCallback: functionName,
4     mouseOverCallback: functionName,
5     mouseOutCallback: functionName
6     }
7 )

Example:

01 function xyz(unit) {
02     alert(unit.element.id)
03 }
04  
05 var unit = new FG_Unit(document.getElementById("id"), {
06     mouseDownCallback: xyz,
07     mouseUpCallback: xyz,
08     mouseOverCallback: xyz,
09     mouseOutCallback: xyz
10     }
11 );

FrameGlider.addDraggableUnit / FrameGlider.removeDraggableUnit

Add and remove Draggables. They support only mouseDownCallback, mouseOverCallback and mouseOutCallback.

1 FrameGlider.addDraggableUnit( unit )
2 FrameGlider.removeDraggableUnit( unit )

Example:

01 function xyz(unit) {
02     alert(unit.element.id)
03 }
04  
05 FrameGlider.addDraggableUnit(
06     new FG_Unit(document.getElementById("id"), {
07         mouseDownCallback: xyz,
08         mouseOverCallback: xyz,
09         mouseOutCallback: xyz
10         }
11     )
12 );

FrameGlider.addDroppableUnit / FrameGlider.removeDroppableUnit

Add and remove Droppables. They support only mouseUpCallback, mouseOverCallback and mouseOutCallback.

1 FrameGlider.addDroppableUnit( unit )
2 FrameGlider.removeDroppableUnit( unit )

Example:

01 function xyz(unit) {
02     alert(unit.element.id)
03 }
04  
05 FrameGlider.addDroppableUnit(
06     new FG_Unit(document.getElementById("id"), {
07         mouseUpCallback: xyz,
08         mouseOverCallback: xyz,
09         mouseOutCallback: xyz
10         }
11     )
12 );

FrameGlider.addPointOfInterestUnit / FrameGlider.removePointOfInterestUnit

Add and remove Points of Interest. They support only mouseOverCallback and mouseOutCallback

1 FrameGlider.addPointOfInterestUnit( unit )
2 FrameGlider.removePointOfInterestUnit( unit )

Example:

01 function xyz(unit) {
02     alert(unit.element.id)
03 }
04  
05 FrameGlider.addPointOfInterestUnit(
06     new FG_Unit(document.getElementById("id"), {
07         mouseOverCallback: xyz,
08         mouseOutCallback: xyz
09         }
10     )
11 );

FrameGlider.getDisabledStatus / FrameGlider.setDisabledStatus

Disable or Enable drag and drop. You can use this to temporarily disable drag drop in case you are adding or removing frames dynamically.

1 FrameGlider.getDisabledStatus()
2 FrameGlider.setDisabledStatus( true/false )

FrameGlider.droppedOnNothing

Callback for the case when the draggable was not dropped on any droppable. That is, a drag event was started and completed, but the draggable was not dropped on any droppable. The function is passed the last known mouse coordinates in an object with members x and y for the left and top coordinates.

1 FrameGlider.droppedOnNothing = function

Example:

1 FrameGlider.droppedOnNothing = function xyz(mousePos) {
2     alert("x: " + mousePos.x + " y: " + mousePos.y)
3 }

FrameGlider.ignoreFrames

Set this to an array of names of frames you would like Frame Glider to ignore. If these frames are visible, it could cause a lot of problems like the mouse follower not following the mouse, events not being fired, etc. It is recommended to use this only for hidden frames.

1 FrameGlider.ignoreFrames = [ frame_name_string, frame_name_string, ... ]

Example:

1 FrameGlider.ignoreFrames = [ "frame1", "frame2", frame3" ];

FrameGlider.mouseFollower

Sets the element that will follow the mouse in the topmost frame and the offset at which it should follow the mouse.

1 FrameGlider.mouseFollower = {
2     element: element,
3     x: offset,
4     y: offset
5 }

Example:

1 FrameGlider.mouseFollower = {
2     element: document.getElementById("id"),
3     x: 10,
4     y: 10
5 }

License

Frame Glider is licensed under the BSD license. This should allow you to use it for any project. If this license is unsuitable for you, please post in the forums. In most reasonable cases, there won’t be any problem in giving it to you under a slightly different license.