Verwenden von $ (this) funktioniert nicht

Question

Ich versuche, ein Skript ausgeführt wird, das einige Ereignisse zu einer Klasse hinzufügt. Ich möchte diese Ereignisse nur zu einem bestimmten DIV unter dieser Klasse hinzugefügt werden. Ich verwende pep.js:

$(".drag").pep({ 
start: function() { 
     $(".drag").addClass('color'); 
     $('.drag').next(".text").fadeIn("slow"); 
     $(".text-video").fadeOut("fast"); 

    }, 
stop: function() { 
     $('.drag').removeClass('color'); 
     $('.drag').next(".text").fadeOut("slow"); 
    } 

    }); 

Dies funktioniert, aber es löst alle .drag Elemente auf einmal ... Und ich möchte nur die, die ich ziehen werde, um alle Ereignisse hinzugefügt zu haben.

Ich versuchte es mit zu schreiben:

$(".drag", this).addClass('color'); 

oder:

$(this).addClass('color'); 

oder:

$(this.element).addClass('color'); 

Aber es hat nicht funktioniert. Hat jemand eine Idee?

UPDATE:

machte ich einen JSFiddle dass hoffentlich mein Problem erklärt.

https://jsfiddle.net/ke6d5r1h/

Wie Sie die .color Klasse zum Beispiel sehen, ist nicht nur auf dem DIV hinzugefügt, die gezogen wird, sondern auch auf der anderen Seite. Das möchte ich ändern.

Answer 1

Mithilfe von console.log(arguments) in den Ereignishandlern konnte ich feststellen, dass den Handlern zwei Argumente übergeben wurden: das Ereignisobjekt und ein Objekt mit Kontext. Der Kontext hat eine Eigenschaft $el, die ein jQuery-Objekt für das Ereignisziel ist.

start: function(e,a) { 
    a.$el.addClass('color'); 
    a.$el.next(".text").fadeIn("slow"); 
    $(".text-video").fadeOut("fast"); 
}, 

https://jsfiddle.net/85tffqhL/

e.target würden Sie auch einen Verweis auf das Element geben.