Disable permanent active state

css, javascript

Solution

Detach and reattach the link from the DOM tree to disable its active state. Do this when the drag ends and you've got this:

$('a').on('dragend',function(){
    var $this   = $(this),
        $parent = $this.parent(),
        $next   = $(this.nextSibling); // $.next() doesn't include text
    $this.detach().insertBefore($next);     
});

No need to mess with your HTML or CSS or do away with `:active`. Seems to work in both FF and IE.

Edit: I don't usually write pure Javascript for DOM-handling so the quality of this might not be top notch, but here it is without jQuery:

(function(){
    var previousOnload = window.onload || function noop(){};

    window.onload = function (){

        // Call any previously added onload callbacks
        previousOnload();

        // Add deactivator to each <a> element
        var elements = document.getElementsByTagName('a');
        for (var i=0; i<elements.length; i++){
            elements[i].ondragend = deactivate;
        }

        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild so that it is put at the right position among the siblings
            parent.insertBefore(this, position);
        }
    };

})();

I took care of a few issues that came to mind to make it fully plug-and-play. Tested in Opera, Chrome, Firefox and Internet Explorer.

Edit 2: Inspired by Chris, another way to apply the fix is to use the `ondragend` attribute directly to connect the `deactivator` (not tested):

<head>
    <script>
        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild so that it is put at the right position among the siblings
            parent.insertBefore(this, position);
        }
    </script>
</head>
<body>
    <a href="#" ondragend="deactivate()">Drag me</a>
<body>

The downside is that it requires the `ondragend` attribute with javascript to be specified on each link manually/explicitly. I guess it's a matter of preference.

Final (?) Edit: See comments for delegate/live versions of these and Chris' answer.

Problem

I have a link, and if you drag this link then release, the link will keep his active state. Example: http://jsfiddle.net/Ek43k/3/ ``` <a href="javascript:void(0);" id="foo" >Drag me</a> ``` ``` #foo:active{ color:red; } ``` How can I prevent this? (Only in IE and FF)

Original source