dropwatcherbehavior.js

AJAX 应用 实现页面的无刷新

                return true;
            }
        }
        
        return false;
    },
    
    // void drop(DragMode, DataType, Data)
    drop: function(dragMode, dataType, data) {
        if (AjaxControlToolkit.DragDropList.IsValidDataType(dataType) && dragMode === AjaxControlToolkit.DragMode.Move) {
            // Re-parent the drag visual.
            dragVisual = data;
            
            var potentialNextSibling = this._findPotentialNextSibling(dragVisual);
            this._setDropCueVisible(false, dragVisual);
            dragVisual.parentNode.removeChild(dragVisual);
            if (potentialNextSibling) {
                this.get_element().insertBefore(dragVisual, potentialNextSibling);
            }
            else {
                this.get_element().appendChild(dragVisual);
            }
        }
        else {
            this._setDropCueVisible(false);
        }
    },
    
    // void onDragEnterTarget(DragMode, DataType, Data)
    onDragEnterTarget: function(dragMode, dataType, data) {
        if (AjaxControlToolkit.DragDropList.IsValidDataType(dataType)) {
            this._setDropCueVisible(true, data);
            this._validate();
        }
    },
    
    // void onDragLeaveTarget(DragMode, DataType, Data)
    onDragLeaveTarget: function(dragMode, dataType, data) {
        if (AjaxControlToolkit.DragDropList.IsValidDataType(dataType)) {
            this._setDropCueVisible(false);
            this._validate();
        }
    },
    
    // void onDragInTarget(DragMode, DataType, Data)
    onDragInTarget: function(dragMode, dataType, data) {
        if (AjaxControlToolkit.DragDropList.IsValidDataType(dataType)) {
            this._setDropCueVisible(true, data);
        }
    },
    
    _setDropCueVisible: function(visible, dragVisual) {
        if (this._dropCueTemplate) {
            if (visible) {
                if (!this._dropCueTemplateInstance) {
                    var documentContext = document.createDocumentFragment();
                    this._dropCueTemplateInstance = this._dropCueTemplate.cloneNode(true);
                }
                
                var potentialNextSibling = this._findPotentialNextSibling(dragVisual);
                
                if (!AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._dropCueTemplateInstance)) {
                    // Add drop cue.
                    if (potentialNextSibling) {
                        this.get_element().insertBefore(this._dropCueTemplateInstance, potentialNextSibling);
                    }
                    else {
                        this.get_element().appendChild(this._dropCueTemplateInstance);
                    }
                        
                    this._dropCueTemplateInstance.style.width = dragVisual.offsetWidth + "px";
                    this._dropCueTemplateInstance.style.height = dragVisual.offsetHeight + "px";
                }
                else {
                    // Move drop cue.
                    if (AjaxControlToolkit.DragDropManager._getInstance().getNextSibling(this._dropCueTemplateInstance) !== potentialNextSibling) {
                        this.get_element().removeChild(this._dropCueTemplateInstance);
                        if (potentialNextSibling) {
                            this.get_element().insertBefore(this._dropCueTemplateInstance, potentialNextSibling);
                        }
                        else {
                            this.get_element().appendChild(this._dropCueTemplateInstance);
                        }
                    }
                }
            }
            else {
                if (this._dropCueTemplateInstance && AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._dropCueTemplateInstance)) {
                    this.get_element().removeChild(this._dropCueTemplateInstance);
                }
            }
        }
    },
    
    _findPotentialNextSibling: function(dragVisual) {
        var dragVisualRect = $common.getBounds(dragVisual);
        var isVertical = (this._direction === 0 /*AjaxControlToolkit.RepeatDirection.Vertical*/);
        var nodeRect;
        for (var node = this.get_element().firstChild; node !== null; node = node.nextSibling) {
            if (node.innerHTML && node !== this._dropCueTemplateInstance && node !== this._emptyTemplateInstance) {
                nodeRect = $common.getBounds(node);
                if ((!isVertical && dragVisualRect.x <= nodeRect.x) || (isVertical && dragVisualRect.y <= nodeRect.y)) {
                    return node;
                }
            }
        }
        
        return null;
    },
    
    _validate: function() {
        var visible = (this._dropCueTemplateInstance == null || !AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._dropCueTemplateInstance));

        // Check if there are draggables left in this host. If not, display a placeholder.
        var count = 0;
        for (var node = this.get_element().firstChild; node !== null; node = node.nextSibling) {
            if (node.innerHTML && node !== this._emptyTemplateInstance && node !== this._dropCueTemplateInstance) {
                count++;
            }
        }
        
        if (count > 0) {
            visible = false;
        }
        this._setEmptyTemplateVisible(visible);
    },
    
    _setEmptyTemplateVisible: function(visible) {
        if (this._emptyTemplate) {
            if (visible) {
                if (!this._emptyTemplateInstance) {
                    this._emptyTemplateInstance = this._emptyTemplate.createInstance(this.get_element()).instanceElement;
                }
                else if (!AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._emptyTemplateInstance)) {
                    this.get_element().appendChild(this._emptyTemplateInstance);
                }
            }
            else {
                if (this._emptyTemplateInstance && AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._emptyTemplateInstance)) {
                    this.get_element().removeChild(this._emptyTemplateInstance);
                }
            }
        }
    },
    
    _getFloatContainer: function() {
        if (!this._floatContainerInstance) {
            this._floatContainerInstance = document.createElement(this.get_element().tagName);
            var none = "0px 0px 0px 0px";
            this._floatContainerInstance.style.position = "absolute";
            this._floatContainerInstance.style.padding = none;
            this._floatContainerInstance.style.margin = none;
            document.body.appendChild(this._floatContainerInstance);
        }
        else if (!AjaxControlToolkit.DragDropManager._getInstance().hasParent(this._floatContainerInstance)) {
            document.body.appendChild(this._floatContainerInstance);
        }
        
        return this._floatContainerInstance;
    }
}
//AjaxControlToolkit.DragDropList.descriptor = {
//    properties: [   {name: 'acceptedDataTypes', type: Array},
//                    {name: 'data', type: Object},
//                    {name: 'dragDataType', type: String},
//                    {name: 'emptyTemplate', type: AjaxControlToolkit.ITemplate},
//                    {name: 'dropCueTemplate', type: AjaxControlToolkit.ITemplate},
//                    {name: 'dropTargetElement', type: Object, readOnly: true},
//                    {name: 'direction', type: AjaxControlToolkit.RepeatDirection},
//                    {name: 'dragMode', type: AjaxControlToolkit.DragMode} ]
//}
AjaxControlToolkit.DragDropList.registerClass('AjaxControlToolkit.DragDropList', AjaxControlToolkit.BehaviorBase, AjaxControlToolkit.IDragSource, AjaxControlToolkit.IDropTarget, Sys.IDisposable);


function callbackSuccessStub(response, context) {

    var contextSplit = context.split(":");

    var id = contextSplit[0];
    var obj = $find(id);      
        
    if (obj) {
        obj._onCallbackSuccess(response, contextSplit[1]);
    }
}

function callbackErrorStub(response, context) {
    
    var contextSplit = context.split(":");

    var id = contextSplit[0];
    var obj = $find(id);      
    alert('error');
    if (obj) {
        obj._onCallbackError(response, contextSplit[1]);
    }
}

AjaxControlToolkit.DragDropWatcher = function(e) {
    AjaxControlToolkit.DragDropWatcher.initializeBase(this, [e]);
    
    this._childList = new Array();
    this._inProgressDrops = new Object();
    
    this._postbackCode = null;
    this._callbackCssStyle = null;

    this._argReplaceString = null;
    this._argContextString = null;
    this._argErrorString = null;
    this._argSuccessString = null;
}
    
AjaxControlToolkit.DragDropWatcher.prototype = {    
    dispose : function() {
        AjaxControlToolkit.DragDropWatcher.callBaseMethod(this, 'dispose');  
        
            },
    
    initialize : function() {
        AjaxControlToolkit.DragDropWatcher.callBaseMethod(this, 'initialize');        
        
        this._saveChildOrder();
    },

//    getDescriptor : function() {
//        // set up our properties
//        //
//        var td = AjaxControlToolkit.DragDropWatcher.callBaseMethod(this, 'getDescriptor');
//        
//        td.addProperty("postbackCode", String);
//        td.addProperty("argReplaceString", String);
//        td.addProperty("argContextString", String);
//        td.addProperty("argSuccessString", String);
//        td.addProperty("argErrorString", String);
//        td.addProperty("callbackCssStyle", String);
//        
//        td.addEvent("reorderComplete", true);
//        
//        return td;
//    }
    
    add_reorderComplete : function(handler) {
        
        this.get_events().addHandler("reorderComplete", handler);
    },
    
    remove_reorderComplete : function(handler) {
    
        this.get_events().removeHandler("reorderComplete", handler);
    
    },
    
    raiseReorderComplete : function() {
    
        var handler = this.get_events().getHandler("reorderComplete");
        if (handler) {
            handler(this, Sys.EventArgs.Empty);
        }
    },
    
    findChild : function(parent, childId) {
        
        // just walk through the list of children looking for the child
        //
        var childIndex = 0;
        var nodes = parent.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var item = nodes[i];
            // nodeName check is for Safari which enumerates LI contents as well
            if ((item != null) && (item.nodeName == "LI")) {
                if (item.id == childId) {
                    return childIndex;
                }
                childIndex++;
            }
        }
        return -1;
    },
    
    canDrop : function(dragMode, dataType, data) {
    
        if (this._inProgressDrops && this._inProgressDrops.length > 0) {            
            return false;        
        }   
    
        var dropOk = AjaxControlToolkit.DragDropWatcher.callBaseMethod(this, 'canDrop',[dragMode,dataType,data]);
        
        if (dropOk) {
            // data is the thing being dragged
            var dragVisualRect = $common.getBounds(data);