Question

If you bind a click event to a class:

$(".testClass").click(  function() {
    $( this ).css( 'top' : '10px' );    
});

In this example, do all elements with that class get assigned the attribute value? Is there a way to apply the attribute only to the class member that was clicked on?

This is what appears to be happening with this makeDraggable plugin I grabbed off the web (and i have modified slightly) – note that e is set = to this. When I apply that to a class selector, all members of the class move, even though I only drag one. Why is that?:

jQuery.fn.makeDraggable = function(delay) {
    if (typeof(delay) == 'undefined') delay = 200;
    var a = false, // drag active
    d = jQuery(document), // document jQuery
    e = jQuery(this), // current element
    c = e.css('cursor'), // current cursor
    p = [null,null], // clicked point
    m = null, // current mouseDown event
    t = null, // timeout id
    bl = function(e) { // blocks an event (to prevent selecting text)
            var tN = e.target.tagName;
            if( ! ( tN == "INPUT" || tN == "LABEL" || tN == "TEXTAREA" )){
               try { // will fail with IE & timeout
                  e.stopPropagation();
                  e.preventDefault();
                    } catch (e) {}; // but will still remain usable
            }
    },
    md = function(e_md) { // mousedown
            bl(e_md); // text selection would occur if not blocked here
            if (a) { // drag active
                    e.css('opacity', '0.8')
                    .css('cursor', 'move')
                    .css('outline', '2px solid #fc0')
                    .css('z-index', '20');
                    d.bind('mousemove', mm);
                    p = [e_md.clientX - e.position().left, e_md.clientY - e.position().top];
                    e.trigger('dragstart');
            } else { // just wait
                    var tN = e.target.tagName;
                    if( ! ( tN == "INPUT" || tN == "LABEL" || tN == "TEXTAREA" )){
                            m = e_md;
                            t = setTimeout(to, delay);
                    }
            }
    },
    mu = function(e_mu) { // mouseup
            if (a) { // drag active
                    bl(e_mu); // text selection would occur if not blocked here
                    d.unbind('mousemove', mm);
                    e.css('opacity', '1')
                    .css('cursor', c)
                    .css('outline', 'none')
                    .trigger('dragend');
            } 
            a = false;
            clearTimeout(t);
    },
    mm = function(e_mm) { // mousemove
            bl(e_mm); // text selection would occur if not blocked here
            e.css('left', (e_mm.clientX - p[0]) + 'px')
            .css('top', (e_mm.clientY - p[1]) + 'px');
    },
    to = function() { // timeout
            a = true;
            if (m) md(m);
    };
    e.bind('mousedown', md).bind('mouseup', mu);
    return e;
};

here’s the initialization code:

 jQuery('.testClass').makeDraggable();

Answer 1

This code:

$(".testClass").click(  function() {
    $( this ).css( 'top' : '10px' );    
});

Says that when a member of the testClass class is clicked, then its top CSS property should be set to 10px.

That plugin should behave the same way. Could you post the code you use to initialize the plugin and possibly the other code in your page?

---

Fixed it.

The problem was here:

md = function(e_md) { // mousedown
bl(e_md); // text selection would occur if not blocked here

if (a) { // drag active
    e.css('opacity', '0.8').css('cursor', 'move').css('outline', '2px solid #fc0').css('z-index', '20');
    d.bind('mousemove', mm);

In this context, e is defined to be the selector that is used to initialize, which happens to be all of the elements in that class. I just redefined e to be $(e_md.target), the target of the event.

A demo and the new code is here: http://jsfiddle.net/H2ahz/7/