dropwatcherbehavior.js

AJAX 应用 实现页面的无刷新

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.


/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference path="../ExtenderBase/BaseScripts.js" />
/// <reference path="../Common/Common.js" />
/// <reference path="../Compat/Timer/Timer.js" />
/// <reference path="../Compat/DragDrop/DragDropScripts.js" />


// This behavior exists to trap a drop on the list.  When an item is dropped,
// this behavior owns firing the postback so the server-side ReorderList control knows it happened.

Type.registerNamespace('AjaxControlToolkit');


AjaxControlToolkit.RepeatDirection = function() {
    throw Error.invalidOperation();
}
AjaxControlToolkit.RepeatDirection.prototype = {
    Vertical: 0,
    Horizontal: 1
}
AjaxControlToolkit.RepeatDirection.registerEnum('AjaxControlToolkit.RepeatDirection');



AjaxControlToolkit.DragDropList = function(associatedElement) {
    AjaxControlToolkit.DragDropList.initializeBase(this, [associatedElement]);
    
    this._acceptedDataTypes = [];
    
    this._isDragging = null;
    
    this._dataType = null;
    this._dragMode = AjaxControlToolkit.DragMode.Move;
    this._dragVisual = null;
    this._direction = AjaxControlToolkit.RepeatDirection.Vertical;
    
    this._emptyTemplate = null;
    this._emptyTemplateInstance = null;
    this._dropCueTemplate = null;
    this._dropCueTemplateInstance = null;
    this._floatContainerInstance = null;
    
    this._originalParent = null;
    this._originalNextSibling = null;
    this._originalZIndex = null;
    
    this._currentContext = null;
    this._data = null;   
    
}

AjaxControlToolkit.DragDropList.IsValidDataType = function(dataType) {
    if (dataType && typeof(dataType) == 'string' && dataType.length >= 4) {
        return dataType.substring(0, 4) === "HTML";                        
    }
    return false;
}    

AjaxControlToolkit.DragDropList.prototype = {
    get_data: function() {
        return this._data;
    },
    
    set_data: function(value) {
        this._data = value;
    },
    
    initialize: function() {
        AjaxControlToolkit.DragDropList.callBaseMethod(this, 'initialize');
        this.get_element().__dragDropList = this;
        AjaxControlToolkit.DragDropManager.registerDropTarget(this);
    },
    
    // -- IDragSource (related) members --
    
    startDragDrop: function(dragObject, context, dragVisual) {
        if (!this._isDragging) {
            this._isDragging = true;
            this._currentContext = context;
            if (!dragVisual) {
                dragVisual = this.createDragVisual(dragObject);
                //DEBUG debug.trace("Using default drag visual.");
            }
            else {
                this._dragVisual = dragVisual;
                //DEBUG debug.trace("Using user-specified drag visual.");
            }
            AjaxControlToolkit.DragDropManager.startDragDrop(this, dragVisual, context);
        }
        
    },
    
    createDragVisual: function(dragObject) {
        if (this._dragMode === AjaxControlToolkit.DragMode.Copy) {
            this._dragVisual = dragObject.cloneNode(true);
        }
        else {
            this._dragVisual = dragObject;
        }
        
        var oldOffset = AjaxControlToolkit.DragDropManager._getInstance().getScrollOffset(dragObject, true);
                
        this._dragVisual.preDragWidth = this._dragVisual.style.width;
        this._dragVisual.preDragHeight = this._dragVisual.style.height;
        
        this._dragVisual.style.width = dragObject.offsetWidth + "px";
        this._dragVisual.style.height = dragObject.offsetHeight + "px";
        
        this._dragVisual.style.opacity = "0.4";
        this._dragVisual.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity=0.4);";
        this._originalZIndex = this._dragVisual.style.zIndex;
        this._dragVisual.style.zIndex = 99999;
        
        this._originalParent = this._dragVisual.parentNode;
        this._originalNextSibling = AjaxControlToolkit.DragDropManager._getInstance().getNextSibling(this._dragVisual);
        
        var currentLocation = $common.getLocation(dragObject);
        
        // Store the drag object in a temporary container to make it self-contained.
        var dragVisualContainer = this._getFloatContainer();
        $common.setLocation(dragVisualContainer, currentLocation);
        
        if (AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._dragVisual)) {
            this._dragVisual.parentNode.removeChild(this._dragVisual);
        }
        dragVisualContainer.appendChild(this._dragVisual);
        
        var newOffset = AjaxControlToolkit.DragDropManager._getInstance().getScrollOffset(dragObject, true);
        if (oldOffset.x !== newOffset.x || oldOffset.y !== newOffset.y) {
            var diff = AjaxControlToolkit.DragDropManager._getInstance().subtractPoints(oldOffset, newOffset);
            var location = AjaxControlToolkit.DragDropManager._getInstance().subtractPoints(currentLocation, diff);
            $common.setLocation(dragVisualContainer, location);
        }
        
        return dragVisualContainer;
    },
    
    get_emptyTemplate: function() {
        return this._emptyTemplate;
    },
    
    set_emptyTemplate: function(value) {
        this._emptyTemplate = value;
    },
    
    // Type get_dragDataType()
    get_dragDataType: function() {
        return this._dataType;
    },
    set_dragDataType: function(value) {
        this._dataType = value;
    },
    
    // Object getDragData(Context)
    getDragData: function(context) {
        return context;
    },
    
    // DragMode get_dragMode()
    get_dragMode: function() {
        return this._dragMode;
    },
    set_dragMode: function(value) {
        this._dragMode = value;
    },
    
    dispose: function() {
        AjaxControlToolkit.DragDropManager.unregisterDropTarget(this);
        this.get_element().__dragDropList = null;
        AjaxControlToolkit.DragDropList.callBaseMethod(this, 'dispose');
    },
    
    // void onDragStart()
    onDragStart: function() {
        this._validate();
    },
    
    // void onDrag()
    onDrag: function() {
        //
    },
    
    // void onDragEnd(Cancelled)
    onDragEnd: function(cancelled) {
        if (this._floatContainerInstance) {
            if (this._dragMode === AjaxControlToolkit.DragMode.Copy) {
                this._floatContainerInstance.removeChild(this._dragVisual);
            }
            else {
                // NOTE: There seems to be a cursor issue in Mozilla when setting the opacity to 1. We 
                // can work around this by setting the opacity to anything lower than 1 instead.
                this._dragVisual.style.opacity = "0.999";
                //_dragVisual.style.opacity = "1";
                this._dragVisual.style.filter = "";
                
                this._dragVisual.style.zIndex = this._originalZIndex ? this._originalZIndex : 0;
                
                // restore the height/width of the drag visual.
                //
                if (this._dragVisual.preDragWidth != null) {
                    this._dragVisual.style.width = this._dragVisual.preDragWidth;
                    this._dragVisual.preDragWidth = null;
                }
                
                if (this._dragVisual.preDragHeight != null) {
                    this._dragVisual.style.height = this._dragVisual.preDragHeight;
                    this._dragVisual.preDragHeight = null;
                }        
            
                if (cancelled) {
                    // Re-parent the drag visual to its original position.
                    this._dragVisual.parentNode.removeChild(this._dragVisual);
                    if (this._originalNextSibling != null) {
                        this._originalParent.insertBefore(this._dragVisual, this._originalNextSibling);
                    }
                    else {
                        this._originalParent.appendChild(this._dragVisual);
                    }
                }
                else {
                    if (this._dragVisual.parentNode === this._floatContainerInstance) {
                        this._dragVisual.parentNode.removeChild(this._dragVisual);
                    }
                }
            }
            
            // Remove the container.
            document.body.removeChild(this._floatContainerInstance);
        }
        else {
            this._dragVisual.parentNode.removeChild(this._dragVisual);
        }
        
        if (!cancelled && this._data && this._dragMode === AjaxControlToolkit.DragMode.Move) {
            var data = this.getDragData(this._currentContext);
            if (this._data && data) {
                Array.remove(this._data, data);
            }
        }
        
        this._isDragging = false;
        this._validate();
    },
    
    // -- IDropTarget (related) members --
    
    get_direction: function() {
        return this._direction;
    },
    
    set_direction: function(value) {
        this._direction = value;
    },
    
    get_acceptedDataTypes: function() {
        return this._acceptedDataTypes;
    },
    
    set_acceptedDataTypes: function(value) {
        
        if (typeof(value) == "string") {
            this._acceptedDataTypes = value.split(",");
        }
        else {
            this._acceptedDataTypes = value;
        }
    },
    
    get_dropCueTemplate: function() {
        return this._dropCueTemplate;
    },
    
    set_dropCueTemplate: function(value) {
        this._dropCueTemplate = value;
    },

    get_dropTargetElement: function() {
        return this.get_element();
    },
    
    // bool canDrop(DragMode, DataType, Data)
    canDrop: function(dragMode, dataType, data) {
        for (var i = 0; i < this._acceptedDataTypes.length; i++) {
            if (this._acceptedDataTypes[i] === dataType) {