Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » Atlas » Downloads
 
Add your own
alternative version

Build a Google IG like AJAX Start Page in 7 days using ASP.NET AJAX and .NET 3.0

, 10 Mar 2010 CPOL
Build a Start Page similar to Google IG in 7 nights using ASP.NET AJAX, .NET 3.0, LINQ, DLinq, and XLinq.
dashboard.zip
src
bin
AjaxControlToolkit.dll
CustomDragDrop
Dashboard
App_Code
App_Data
App_Themes
Default
google.gif
HeaderBack.PNG
Logo.png
max_blue.gif
max_blue_highlight.gif
min_blue.gif
min_blue_highlight.gif
x_blue.gif
x_blue_highlight.gif
Bin
AjaxControlToolkit.dll
CSharp3CodeDomProvider.dll
Global.asax
indicator.gif
vwd.webinfo
Widgets
FlickrIcon.gif
rss.gif
DashboardBusiness
Activities
CreateDeafultWidgetsOnPageActivity.rules
DashboardBusiness.csproj.user
NewUserSetupWorkflow.rules
Properties
UserVisitWorkflow.rules
DashboardData
Properties
Dashboard.bak
// (c) Copyright Omar AL Zabir.
// All other rights reserved.

Type.registerNamespace('CustomDragDrop');

CustomDragDrop.CustomFloatingBehavior = function(element) {
    CustomDragDrop.CustomFloatingBehavior.initializeBase(this,[element]);
    
    var _handle;
    var _location;
    var _dragStartLocation;
    var _DragHandleIDValue;
    
    var _mouseDownHandler = Function.createDelegate(this, mouseDownHandler);
    
    this.get_DragHandleID = function()
    {
        return this._DragHandleIDValue;
    }
    
    this.set_DragHandleID = function(value)
    {
        this._DragHandleIDValue = value;
    }
    
    this.add_move = function(handler) {
        this.get_events().addHandler('move', handler);
    }
    
    this.remove_move = function(handler) {
        this.get_events().removeHandler('move', handler);
    }
    
    this.get_handle = function() {
        return _handle;
    }
    this.set_handle = function(value) {
        if (_handle != null) {
            $removeHandler(_handle, "mousedown", _mouseDownHandler);                        
        }
    
        _handle = value;
        $addHandler(_handle, "mousedown", _mouseDownHandler);                
    }
    
    this.get_location = function() {
        return _location;
    }
    this.set_location = function(value) {
        if (_location != value) {
            _location = value;
            if (this.get_isInitialized()) {                
                
                Sys.UI.DomElement.setLocation(this.get_element(), _location.x, _location.y);
            }
            this.raisePropertyChanged('location');
        }
    }
    
    this.initialize = function() {
        CustomDragDrop.CustomFloatingBehavior.callBaseMethod(this, 'initialize');

        // Set the handle and initialize dragging
        this.set_handle( $get( this.get_DragHandleID() ) );
    }
    
    this.dispose = function() {
        if (_handle && _mouseDownHandler) {
            $removeHandler(_handle, "mousedown", _mouseDownHandler);
        }
        _mouseDownHandler = null;
        CustomDragDrop.CustomFloatingBehavior.callBaseMethod(this, 'dispose');
    }
    
    this.checkCanDrag = function(element) {
        var undraggableTagNames = ["input", "button", "select", "textarea", "label"];
        var tagName = element.tagName;
        
        if ((tagName.toLowerCase() == "a") && (element.href != null) && (element.href.length > 0)) {
            return false;
        }
        if (Array.indexOf(undraggableTagNames, tagName.toLowerCase()) > -1) {
            return false;
        }
        return true;
    }

    
    function mouseDownHandler(ev) {
        window._event = ev;
        var el = this.get_element();
        
        if (!this.checkCanDrag(ev.target)) return;
        
        // Get the location before making the element absolute
        _location = Sys.UI.DomElement.getLocation(el);

        // Make the element absolute 
        el.style.width = el.offsetWidth + "px";
        el.style.height = el.offsetHeight + "px";            
        Sys.UI.DomElement.setLocation(el, _location.x, _location.y);               
        
        _dragStartLocation = Sys.UI.DomElement.getLocation(el);        
        
        ev.preventDefault();
        
        this.startDragDrop(el);
        
        // Hack for restoring position to static
        el.originalPosition = "static";
        el.originalZIndex = el.style.zIndex;
        el.style.zIndex = "60000";
    }
    
    // Type get_dataType()
    this.get_dragDataType = function() {
        return "_CustomFloatingItem";
    }
    
    // Object get_data(Context)
    this.getDragData = function(context) {
        return { item : this.get_element(), handle : this.get_handle() } ;
    }
    
    // DragMode get_dragMode()
    this.get_dragMode = function() {
        return AjaxControlToolkit.DragMode.Move;
    }
    
    // void onDragStart()
    this.onDragStart = function() { }
    
    // void onDrag()
    this.onDrag = function() { }
    
    // void onDragEnd(Canceled)
    this.onDragEnd = function(canceled) {
        if (!canceled) {
            var handler = this.get_events().getHandler('move');
            if(handler) {
                var cancelArgs = new Sys.CancelEventArgs();
                handler(this, cancelArgs);
                canceled = cancelArgs.get_cancel();
            }            
        }
        
        var el = this.get_element();
        el.style.width = el.style.height = el.style.left = el.style.top = "";
        el.style.zIndex = el.originalZIndex;
        
        if (canceled) {
            // Restore the position of the control.
            //Sys.UI.DomElement.setLocation(el, _dragStartLocation.x, _dragStartLocation.y);            
        }
        else {
            var location = Sys.UI.DomElement.getLocation(el);
            _location = location.x + ',' + location.y;
            this.raisePropertyChanged('location');
        }
    }
    
    this.startDragDrop = function(dragVisual) {
        AjaxControlToolkit.DragDropManager.startDragDrop(this, dragVisual, null);
    }
    
    this.get_dropTargetElement = function() {
        return document.body;
    }
    
    // bool canDrop(DragMode, DataType, Data)
    this.canDrop = function(dragMode, dataType, data) {
        return (dataType == "_CustomFloatingItem");
    }

}
//CustomDragDrop.CustomFloatingBehavior.descriptor = {
//    properties: [   {name: "profileProperty", type: String},
//                    {name: "profileComponent", type: Object},
//                    {name: "dragData", type: Object, readOnly: true},
//                    {name: "dragDataType", type: String, readOnly: true},
//                    {name: "dragMode", type: AjaxControlToolkit.DragMode, readOnly: true},
//                    {name: "dropTargetElement", type: Object, readOnly: true},
//                    {name: "handle", type: Sys.UI.DomElement},
//                    {name: "location", type: String} ],
//    events: [   {name: "move"} ]
//}
CustomDragDrop.CustomFloatingBehavior.registerClass('CustomDragDrop.CustomFloatingBehavior', AjaxControlToolkit.BehaviorBase, AjaxControlToolkit.IDragSource, /* AjaxControlToolkit.IDropTarget, */ Sys.IDisposable);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Omar Al Zabir
Architect BT, UK (ex British Telecom)
United Kingdom United Kingdom

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 10 Mar 2010
Article Copyright 2007 by Omar Al Zabir
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid