Question

var previousZone = null;
//Evaluates whether the currently moused-over item is a RadDockZone.
//TODO: Make more understandable.
function TryGetZoneFromTarget(target) {

    //Done for performance. Comparing object types is slower than a string comparison on ID.
    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) {
        dockZoneDroppedOnID = currentZone.get_id();

        if (previousZone == null) {
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
        else if (previousZone != currentZone) {
            RemoveHighlighting(previousZone);
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
    }
    else {
        dockZoneDroppedOnID = "";
        if (previousZone != null) {
            RemoveHighlighting(previousZone);
            previousZone = null;
        }
    }
}

So, I have a weird quirk which is making this method a lot uglier. When the client is dragging their mouse, if they drag too quickly, the target won’t return an ID when it actually has one. This was resulting in flickering, I would remove and re-add highlighting when not moving through a zone. As such, I patched in this quick fix… but it’s really bad.

What’s a proper way of handling such a scenario in Javascript? Should I have an enumeration of three types… “Zone”, “NotZone”, “Ignore” and work from there? Or…?

public class CormantRadListBox : RadListBox
{
    public CormantRadListBox()
    {
        EnableDragAndDrop = true;
        OnClientDragging = "OnClientDragging";
        OnClientDropping = "OnClientDropping";
        Sort = RadListBoxSort.Ascending;
        Skin = "Web20";
        Width = Unit.Percentage(100);
    }
}

Answer 1

“A better way to write” is always subjective, but if what you mean is your drag zone is undefined, which is a different case than an empty/null result for drag zone, check for undefined, then null, then value:

function TryGetZoneFromTarget(target) { 

     if(/\S/.test(e.target.id) == false){
           return undefined;
     }

     var c = $find(e.target.id);

     if(c && Telerik.Web.UI.RadDockZone.isInstanceOfType(c)) {
        return c;
     }

     return null;
}

function OnClientDragging(sender, eventArgs) {       
     var target = eventArgs.get_htmlElement();       
     var currentZone = TryGetZoneFromTarget(target);   

     if(currentZone === undefined) {
           // return or do nothing
     } else if(currentZone === null) {
           // do something 
     } else {
           // do something else
     }
}