movable.htc

Flash电子相册 v1.2 Build 1108完整版本下载

<!-- ---------------------------------------------------------------------
//
//  Copyright 2000 Microsoft Corporation.  All Rights Reserved.
//
//  File:         movable.htc
//
//  Description:  This behavior allows the web author to make page elements
//                moveable via the mouse or through script. The movement can
//                be limited to a set area, or to horizontal or vertical 
//                movement only. 
//
//--------------------------------------------------------------------------------
//加入一个“行为”，这个div就可以移动了，不用管这个htc文件内容，只要放置到相应目录即可，这个htc文件是微软公司写的一个js类库。兼容性很好。 
//一个最简单的形式：
//  引用:
//--------------------------------------------------------------------------------
//<div style="behavior: url(movable.htc);" id="myspan">
//参考：http://www.knowsky.com/3740.html
//--------------------------------------------------------------------------------
//htc文件：upload/movable.rar 
//-------------------------------------------------------------------- -->

<PROPERTY NAME="movable"    />
<PROPERTY NAME="direction"  />
<PROPERTY NAME="snapable"   />
<PROPERTY NAME="selectable" />
    
<METHOD   NAME="moveTo"     />
<METHOD   NAME="snapToGrid" />
<METHOD   NAME="noshow" />
<METHOD   NAME="yeshow" />

    
<EVENT    NAME="ondrag"           ID="drag"      />
<EVENT    NAME="ondragstart"      ID="dragstart" />
<EVENT    NAME="ondragend"        ID="dragend"   />
<EVENT    NAME="onerror"          ID="error"     />

<ATTACH   EVENT="onmouseup"       HANDLER="DoMouseUp"   />
<ATTACH   EVENT="onmousedown"     HANDLER="DoMouseDown" />
<ATTACH   EVENT="onclick"         HANDLER="DoSelect"    />
<ATTACH   EVENT="onselectstart"   HANDLER="DoSelect"    />
<ATTACH   EVENT="ondocumentready" HANDLER="SetDefaults" />


<SCRIPT LANGUAGE="jscript">

//+----------------------------------------------------------------------------
//
//  Global Variables
//
//-----------------------------------------------------------------------------

var iOffsetX;                       // On the dragstart event, this variable is
                                    //    set to track the difference between the
                                    //    mouse position and the corner of the
                                    //    element

var iOffsetY;                       // Same as iOffsetX, but for Y coordinate

var normZindex = style.zIndex;      // Tracks the regular zIndex so it can be
                                    //    restored once the dragend event occurs

var zBound = new Array              // Used for parsing the mvBoundary prop
    ('Top', 'Right',                //     into it's four component parts 
    'Bottom', 'Left');


//+----------------------------------------------------------------------------
//
//  Function:       SetDefaults
//
//  Description:    Called during the initialization of the behavior.  Sets
//                  the required settings for CSS properties, the defaults for
//                  custom CSS properties, and attaches the onpropertychange
//                  event (not done in the header to prevent firing the event
//                  during initialization).
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function SetDefaults()
{
    //  Required CSS properties
    style.left = offsetLeft;
    style.top = offsetTop;
    style.position = "absolute";
    
    style.display='none';

    //
    //  Set these properties before the individual ones are set next.  Thus,
    //  individual properties will override the container properties here.
    //
    style['mvBoundary'] = currentStyle['mv--boundary'];
    style['mvGrid'] = currentStyle['mv--grid'];

    //  Custom CSS Property Defaults
    CustomDefault('mv--boundary-left','mvBoundaryLeft',null);
    CustomDefault('mv--boundary-right','mvBoundaryRight',null);
    CustomDefault('mv--boundary-top','mvBoundaryTop',null);
    CustomDefault('mv--boundary-bottom','mvBoundaryBottom',null);
    CustomDefault('mv--grid-rows','mvGridRows',null);
    CustomDefault('mv--grid-cols','mvGridCols',null);

    //  Format the grid and boundary
    FormatGrid();
    FormatBoundary();

    //  Attach the onpropertychange event
    attachEvent("onpropertychange", DoPropChange);
    
}


//+----------------------------------------------------------------------------
//
//  Function:       CustomDefault
//
//  Description:    Sets the defaults for custom CSS properties and establishes
//                  a scriptable name for the property
//
//  Arguments:      sCSSName - the CSS name of the property
//                  sScriptName - the desired Scriptable name of the property
//                  sDefault - the desired default value
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function CustomDefault(sCSSName, sScriptName, sDefault)
{
    if (currentStyle[sCSSName] == null)
    {
        style[sCSSName] = sDefault;
    }
    else style[sCSSName] = currentStyle[sCSSName];
    
    style[sScriptName] = style[sCSSName];
}


//+----------------------------------------------------------------------------
//
//  Function:       FormatGrid
//
//  Description:    Parse the mvGrid space-delimited string to get mvGridRows
//                  and mvGridCols
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function FormatGrid()
{
    if (style['mvGrid'] != null)
    {
        if (style['mvGridCols'] == null)
        {
            style['mvGridCols'] = parseInt(style['mvGrid'].substring(
                0,style['mvGrid'].indexOf(" ")));
        }
    
        if (style['mvGridRows'] == null)
        {
            style['mvGridRows'] = parseInt(style['mvGrid'].substring(
                style['mvGrid'].indexOf(" ")+1,style['mvGrid'].length));
        }
    }
    
    //  Call snapToGrid to enforce new values
    snapToGrid();
}


//+----------------------------------------------------------------------------
//
//  Function:       FormatBoundary
//
//  Description:    Parse the mvBoundary space-delimited string to get 
//                  mvBoundaryTop, mvBoundaryRight, mvBoundaryBottom, and
//                  mvBoundaryLeft.
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function FormatBoundary()
{
    if (style['mvBoundary'] != null)
    {
        var iStart = 0;
        var iEnd = style['mvBoundary'].indexOf(" ");
                
        for (i=0; i<zBound.length; i++)
        {
            style['mvBoundary' + zBound[i]] = 
                style['mvBoundary'].substring(iStart,iEnd);
                
            if (iEnd == style['mvBoundary'].length) break;
            
            iStart = iEnd + 1;
            iEnd = style['mvBoundary'].indexOf(" ", iStart);
            if (iEnd == -1) iEnd = style['mvBoundary'].length;
        }
    }

    SetBoundary();
}


//+----------------------------------------------------------------------------
//
//  Function:       DoPropChange
//
//  Description:    Runs on the onpropertychange event and calls the necessary
//                  functions to correctly handle the property that was just
//                  changed.
//
//  Arguments:      none
//
//  Returns:        nothing
//
//-----------------------------------------------------------------------------

function DoPropChange()
{
    var propertyName = window.event.propertyName;

    //
    //  Handle CSS property changes by calling necessary functions, setting
    //  variables, and/or setting styles
    //
    if (propertyName.substring(0,5) == "style")
    {
        switch(propertyName)
        {
            case "style.zIndex"             :
                normZindex = style.zIndex;
                break;
                
            case "style.position"           :
                style.position = "absolute";
                break;
   
            case "style.mvGridRows"           :
                snapToGrid();
                break;
                
            case "style.mvGridCols"           :
                snapToGrid();
                break;
                
             case "style.mvGrid"               :
                FormatGrid();
                break;               
                
            case "style.mvBoundaryLeft"       :
                SetBoundary();
                break;

            case "style.mvBoundaryTop"        :
                SetBoundary();
                break;
                
            case "style.mvBoundaryRight"      :
                SetBoundary();
                break;
                
            case "style.mvBoundaryBottom"     :
                SetBoundary();
                break;
                               
            case "style.mvBoundary"           :
                FormatBoundary();
                break;
        }
    }
    else
    {
        //
        //  Detach the onpropertychange event to prevent it from firing while
        //  the changes are handled
        //
        detachEvent("onpropertychange", DoPropChange);
        
        switch(propertyName)
        {
            case "movable"                  :
                break;
              
            case "direction"                :
                break;
                
            case "snapable"                 :
                if (snapable == true || snapable == "true") snapToGrid();
                break;
                
            case "selectable"               :
                break;    

            default                         :
                ReturnError(propertyName + " not a valid property");
                break;
        }
        
        //  Re-attach the onpropertychange event
        attachEvent("onpropertychange", DoPropChange);
    }
}


//+----------------------------------------------------------------------------
//
//  Function:       moveTo
//                  
//  Description:    Moves the piece to the specified coordinates by calling
//                  the MoveElement() function.  
//
//  Arguments:      iNewX - Left position to move the piece to
//                  iNewY - Top position to move the piece to
//
//  Returns:        true if the movable property is set to false
//                  false if iNewX or iNewY do not contain numbers
//
//-----------------------------------------------------------------------------

function moveTo(iNewX, iNewY)
{
    if (movable == false || movable == "false") return true;

    iNewX = parseInt(iNewX);
    iNewY = parseInt(iNewY);

    if (isNaN(iNewX) && isNaN(iNewY)) return false;
    
    //  Call MoveElement to move the piece
    MoveElement(iNewX, iNewY);
}

function noshow(iNewX, iNewY)
{
    //element.style.display='none';
    SetDefaults();
}

function yeshow(iNewX, iNewY)
{
    element.style.display='block';
}
//+----------------------------------------------------------------------------
//
//  Function:       snapToGrid
//
//  Description:    Based on the grid established with the mvGridRows and
//                  mvGridCols properties, snap the piece to the grid.
//
//  Arguments:      none
//
//  Returns:        nothing
//