Setting various control BackgroundColor's OnClientDragging

4 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 31 Jan 2011 Link to this post

    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
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 02 Feb 2011 Link to this post

    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>
  5. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 15 Jul 2011 Link to this post

    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;
            }
        }
    }


Back to Top