floatingbehavior.js

来自「《ajax编程技术与实例》的所有的案例」· JavaScript 代码 · 共 193 行

Type.registerNamespace('Custom.UI');

Custom.UI.FloatingBehavior = function() {
    Custom.UI.FloatingBehavior.initializeBase(this);
    
    var _handle;
    var _location;
    var _dragStartLocation;
    var _dataType = 'HTML';
    var _isDragging;
    var _dragMode = Sys.UI.DragMode.Move;
            
    var _mouseDownHandler = Function.createDelegate(this, mouseDownHandler);

    this.get_handle = function() {
        return _handle;
    }
    this.set_handle = function(value) {
        if (_handle != null) {
            _handle.detachEvent("onmousedown", _mouseDownHandler);
        }
    
        _handle = value;
        _handle.attachEvent("onmousedown", _mouseDownHandler);
    }
    
    this.get_location = function() {
        return _location;
    }
    this.set_location = function(value) {
        if (_location != value) {
            _location = value;
            if (this.get_isInitialized()) {
                var numbers = _location.split(',');
                var location = { x : parseInt(numbers[0]), y : parseInt(numbers[1]) };
                Sys.UI.Control.setLocation(this.control.element, location);
            }
            this.raisePropertyChanged('location');
        }
    }
    
    this.initialize = function() {
        Custom.UI.FloatingBehavior.callBaseMethod(this, 'initialize');

        var el = this.control.element;

        var location;
        if (_location) {
            var numbers = _location.split(',');
            location = { x : parseInt(numbers[0]), y : parseInt(numbers[1]) };
        }
        else {
            location = Sys.UI.Control.getLocation(el);
        }
        
        el.style.width = el.offsetWidth + "px";
        el.style.height = el.offsetHeight + "px";
        el.style.position = "absolute";
        Sys.UI.Control.setLocation(el, location);
    }
    
    this.dispose = function() {
        if (_handle != null) {
            _handle.detachEvent("onmousedown", _mouseDownHandler);
        }
        _mouseDownHandler = null;
        Custom.UI.FloatingBehavior.callBaseMethod(this, 'dispose');
    }
    
    this.getDescriptor = function() {
        var td = Custom.UI.FloatingBehavior.callBaseMethod(this, 'getDescriptor');
        
        td.addProperty("data", Object, true);
        td.addProperty("dataType", String, true);
        td.addProperty("dragMode", Sys.UI.DragMode, true);
        td.addProperty("handle", Object, false, Sys.Attributes.Element, true);
        td.addProperty("location", String);
        return td;
    }
    
    function mouseDownHandler() {
        var el = this.control.element;
        if(_dragStartLocation==null)_dragStartLocation = Sys.UI.Control.getLocation(el);
        
        window.event.returnValue = false;
        this.startDragDrop(el);
    }


        this.set_dataType = function(value) {
            _dataType = value;
        }
        
        this.get_dataType = function() {
        return _dataType;
    }
    
        this.get_data = function(context) {
        return null;
    }
    
        this.get_dragMode = function() {
        return _dragMode;
    }
    
        this.set_dragMode = function(value){
            _dragMode = value;
    }
    
        this.onDragStart = function() {
        //
    }
    
        this.onDrag = function() {
        //
    }
    
        this.onDragEnd = function(canceled) {
        if (!canceled) {
            var cancelArgs = new Sys.CancelEventArgs();
            canceled = cancelArgs.get_canceled();
        }
                
        var el = this.control.element;
        
        if (_dragMode == Sys.UI.DragMode.Copy) {
                document.body.removeChild(_dragVisual);
        }
        
        if (canceled) {
           Sys.UI.Control.setLocation(el, _dragStartLocation);
        }
        _isDragging = false;
    }
    
        this.startDragDrop = function(dragObject, context, dragVisual) {
            if (!_isDragging) {
                _isDragging = true;
                _currentContext = context;
                if (dragVisual == null) {
                    dragVisual = this.createDragVisual(dragObject);
                }
                else {
                    _dragVisual = dragVisual;
                }
                Sys.UI.DragDropManager.startDragDrop(this, dragVisual, context);
            }
            else {

            }
        }
    
        this.createDragVisual = function(dragObject) {
            if (_dragMode == Sys.UI.DragMode.Copy) {
                _dragVisual = dragObject.cloneNode(true);
              
            var oldOffset = Sys.UI.DragDropManager._getInstance().getScrollOffset(dragObject, true);
            
            _dragVisual.style.width = dragObject.offsetWidth + "px";
            _dragVisual.style.height = dragObject.offsetHeight + "px";
            
            _dragVisual.style.opacity = "0.4";
            _dragVisual.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity=0.4);";
            _originalZIndex = _dragVisual.style.zIndex;
            _dragVisual.style.zIndex = 99999;
            _originalParent = _dragVisual.parentNode;
            _originalNextSibling = Sys.UI.DragDropManager._getInstance().getNextSibling(_dragVisual);
            

            if (Sys.UI.DragDropManager._getInstance().hasParent(_dragVisual)) {
                _dragVisual.parentNode.removeChild(_dragVisual);
            }
            document.body.appendChild(_dragVisual);
            
            var newOffset = Sys.UI.DragDropManager._getInstance().getScrollOffset(dragObject, true);
            if (oldOffset.x != newOffset.x || oldOffset.y != newOffset.y) {
                var diff = Sys.UI.DragDropManager._getInstance().subtractPoints(oldOffset, newOffset);
                Sys.UI.Control.setLocation(dragVisualContainer, Sys.UI.DragDropManager._getInstance().subtractPoints(currentLocation, diff));
                }
            }
            else {
                _dragVisual = dragObject;
            }
            
            return _dragVisual;
        }
}
Custom.UI.FloatingBehavior.registerClass('Custom.UI.FloatingBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'Floating', Custom.UI.FloatingBehavior);