Ajax Layer JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Ajax Layer
  4. Drag and Snap (SnapX)
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999



Dynapi Examples - Drag & Snap (SnapX)



    dynapi.library.setPath('./dynapisrc/');
    dynapi.library.include('dynapi.api');
    dynapi.library.include('dynapi.api.ext.DragEvent');
    dynapi.library.include('dynapi.fx.SnapX');
    dynapi.library.include('dynapi.functions.Color');


    var l1,l2,l3,l4,l5,l6,l7,l8,l9,l1txt,l2txt,l3txt,l4txt,l5txt,l6txt,l7txt,l8txt,l9txt;
    l1txt = 'dragsnapinner, 5';
    l2txt = 'dragsnapouter, 5';
    l3txt = 'dragsnapboth, 5';
    l4txt = 'dragsnapboth, 10sticky';
    l5txt = 'dragsnapboth, 10grid, def';
    l6txt = 'staticsnapdef, 15';
    l7txt = 'staticsnapdef, 10sticky';
    l8txt = 'dragsnapdef, defgrid, def';
    //l9txt = 'dragsnapdef, def';
    l1 = new DynLayer(l1txt,25,25,50,50,'red');
    l2 = new DynLayer(l2txt,185,25,50,50,'orange');
    l3 = new DynLayer(l3txt,350,25,50,50,'yellow');
    l4 = new DynLayer(l4txt,515,25,50,50,'lightgreen');
    l5 = new DynLayer(l5txt,675,25,50,50,'lightblue');
    l6 = new DynLayer(l6txt,25,100,100,100,'violet');
    l7 = new DynLayer(l7txt,225,100,100,100,'tan');
    l8 = new DynLayer(l8txt,425,100,175,175,'lightgrey');
    //l9 = new DynLayer(l9txt,625,100,100,100,'gray');
    l1.setTextSelectable(false);
    l2.setTextSelectable(false);
    l3.setTextSelectable(false);
    l4.setTextSelectable(false);
    l5.setTextSelectable(false);
    l6.setTextSelectable(false);
    l7.setTextSelectable(false);
    l8.setTextSelectable(false);
    //l9.setTextSelectable(false);
    l1.enableSnap();
    l2.enableSnap();
    l3.enableSnap();
    l4.enableSnap();
    l4.enableStickySnap();
    l5.enableSnap();
    l5.enableGridSnap();
    l6.enableSnap();
    l7.enableSnap();
    l7.enableStickySnap();
    l8.enableSnap();
    l8.enableGridSnap();
    //l9.enableSnap();
    l1.setSnapBoundary('inner',5);
    l2.setSnapBoundary('outer',5);
    l3.setSnapBoundary('both',5);
    l4.setSnapBoundary('both',10);
    l5.setSnapBoundary('both',10);
    l6.setSnapBoundary(15);
    l7.setSnapBoundary(10);
    l8.setSnapBoundary(15,40);
    l1.setZIndex(100);
    l2.setZIndex(101);
    l3.setZIndex(102);
    l4.setZIndex(103);
    l5.setZIndex(104);
    l6.setZIndex(10);
    l7.setZIndex(11);
    l8.setZIndex(12);
    //l9.setZIndex(13);
    DragEvent.enableDragEvents(l1);
    DragEvent.enableDragEvents(l2);
    DragEvent.enableDragEvents(l3);
    DragEvent.enableDragEvents(l4);
    DragEvent.enableDragEvents(l5);
    l1.addEventListener({
        onsnap : function(e) {
            var src = e.getSource();
        }
    });
    l2.addEventListener({
        onsnap : function(e) {
            var src = e.getSource();
        }
    });
    l3.addEventListener({
        onsnap : function(e) {
            var src = e.getSource();
        }
    });
    l4.addEventListener({
        onsnap : function(e) {
            var src = e.getSource();
        }
    });
    l5.addEventListener({
        onsnap : function(e) {
            var src = e.getSource();
        }
    });
    dynapi.document.addChild(l1);
    dynapi.document.addChild(l2);
    dynapi.document.addChild(l3);
    dynapi.document.addChild(l4);
    dynapi.document.addChild(l5);
    dynapi.document.addChild(l6);
    dynapi.document.addChild(l7);
    dynapi.document.addChild(l8);
    //dynapi.document.addChild(l9);














Drag & Snap the layers above.

API notes:

Public Methods (Snap):

      
  • [null] enableSnap() & disableSnap()

    •   
  • [null] setSnapBoundaryTypeDefault([inner|outer|both]) & [inner|outer|both] getSnapBoundaryTypeDefault()

    •   
  • [null] setSnapBoundaryType([inner|outer|both]) & [snapType] getSnapBoundaryType()

    •   
  • [null] setSnapBoundaryDefault(b) & [b] getSnapBoundaryDefault()

    •   
  • [null] setSnapBoundary() or setSnapBoundary(b) or
          [null] setSnapBoundary([inner|outer|both],b) or
          [null] setSnapBoundary(number,number) or
          [null] setSnapBoundary([inner|outer|both],t,r,b,l) or
          [null] setSnapBoundary(ti,ri,bi,li,to,ro,bo,lo)

    •   
  • [Array (t,r,b,l)] getSnapBoundary([inner|outer]) or
          [Array (ti,ri,bi,li,to,ro,bo,lo)] getSnapBoundary(both)

    •   
  • [null] enableStickySnap() & disableStickySnap()

    •   
  • [null] enableGridSnap() & disableGridSnap()

    •   
  • [null] setGridSnapSize(b)


BUGS list:

      
  • Dragging a grid snap layer over a sticky snap layer acts like grid snap when it should not.

    •   
  • Double check & clean up inner & outer corner grid snapping code.

    •   
  • Add sticky snap support for both sides of the target layer's border (currently inner or outer only).

    •   
  • Add sticky snap support for upper-right and lower-left corners (i.e. reflective w.r.t. real edge).

    •   
  • Find a way to make the snapping/resnapping less jittery (i.e. sticky & grid are options).


TODO list:

      
  • Add argument passing to enableSnap() for more compact way to specify snap type [normal|sticky|grid], boundary type [inner|outer|both], grid size (if applicable) and boundary sizes.

    •   
  • Add a dockable feature.

    •   
  • Add a "ghost" feature.





           
       
dynapi.zip( 791 k)