Setting various control BackgroundColor's OnClientDragging

[Sean]

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

[Kate]

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

[Sean]

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>

[Sean]

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;

        }

    }

}