This is a migrated thread and some comments may be shown as answers.

Setting various control BackgroundColor's OnClientDragging

3 Answers 39 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 01 Feb 2011, 02:07 AM
Hi All,

I am attempting to achieve the following functionality: I would like to change the background color of the control the user's mouse is currently over when the user is dragging an item.

Reasoning: I allow the user to drag-and-drop items from a RadListBox onto the page. This drag-and-drop functionality creates RadDocks. Once a RadDock is on the page it set's its RadDockZone is forbidden to all other docks. As such, if I had two docks on the page, I indicate that a 3rd RadDockZone is a viable move option by changing that DockZone's background color to green. I would like this functionality to extend to when the user is first creating their RadDock -- I would like DockZone currently being hovered-over to turn green.

Is this possible? I'm looking through the OnClientDragging event, and I can see that it can return (X,Y) coordinates through use of the get_domevent() method. Is there a way to translate this hit coordinate into the control located at the coordinate? 

Thanks for your time,

Sean Anderson

3 Answers, 1 is accepted

Sort by
0
Accepted
Kate
Telerik team
answered on 02 Feb 2011, 02:19 PM
Hello Sean,

You can use the get_htmlElement() method on the client side that will return the DOM html element which the item is dropped onto. Then you can call the fuction in the ListBox control using OnClientDragging event.

Regards,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Sean
Top achievements
Rank 2
answered on 02 Feb 2011, 08:38 PM
Just thought I would follow up with the solution I came up with in case anyone else needs it. It works and doesn't generate any errors, but I am not exactly familiar with JavaScript so it could probably be optimized.

<script type="text/javascript">
                    var previousZone = null;
                    function isMouseOverZone(target) {
                        while (target != null) {
                            if (target.id) {
                                if ($find(target.id)) {
                                    if (Object.getTypeName($find(target.id)) == "Telerik.Web.UI.RadDockZone") {
                                        return target;
                                    }
                                }
                            }
                            target = target.parentNode;
                        }
                        return null;
                    }
 
                    function OnClientDragging(sender, args) {
                        var target = args.get_htmlElement();
                        if (!target) return;
 
                        var zone = isMouseOverZone(target);
 
                        if (zone) {
                            if (previousZone == null) {
                                previousZone = zone;
                                $find(zone.id).addCssClass("zoneClass");
                            }
                            else if (previousZone != zone) {
                                $find(previousZone.id).removeCssClass("zoneClass");
                                previousZone = zone;
                                $find(zone.id).addCssClass("zoneClass");
                            }
                        }
                        else {
                            if (previousZone != null) {
                                $find(previousZone.id).removeCssClass("zoneClass");
                                previousZone = null;
                            }
                        }
                    }
                </script>
0
Sean
Top achievements
Rank 2
answered on 15 Jul 2011, 08:14 PM
Hey, just thought I would update my post here. I found some other issues with my previous script -- in some scenarios when the mouse is moved too quickly the highlighting would stutter.

var previousZone = null;
//Evaluates whether the currently moused-over item is a RadDockZone.
function TryGetZoneFromTarget(target) {
    if (target != null && target.id && target.id.indexOf("RadDockZone") != -1) {
        return $find(target.id);
    }
 
    if (!target.id) {
        return "IGNORE";
    }
 
    return null;
}
 
//Adds highlighting to the dockZones when the user is dragging objects to the screen.
//Clear the old dockZone as the user moves out of it, and color new ones as they move into it.
function OnClientDragging(sender, eventArgs) {
    var target = eventArgs.get_htmlElement();
    var currentZone = TryGetZoneFromTarget(target);
 
    if (currentZone == "IGNORE") return;
//When the user moves the mouse too fast inside of a zone, the zone returns no ID but this is a red-herring.
//Ignoring this prevents flickering where we temporarily remove the highlighting on a zone when not moving out of it.
 
    if (currentZone) {
        if (previousZone == null) {
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
        else if (previousZone != currentZone) {
            RemoveHighlighting(previousZone);
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
    }
    else {
        if (previousZone != null) {
            RemoveHighlighting(previousZone);
            previousZone = null;
        }
    }
}


Tags
ListBox
Asked by
Sean
Top achievements
Rank 2
Answers by
Kate
Telerik team
Sean
Top achievements
Rank 2
Share this question
or