Home/ Questions/Q 8466021
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:13:11+00:00

I have a link, and if you drag this link then release, the link

  • 0

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)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0