Использование $ (this) не работает

Question

Я пытаюсь запустить скрипт, который добавляет некоторые события в класс. Я хочу, чтобы эти события добавлялись только к одному конкретному DIV в этом классе. Я использую 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"); 
    } 

    }); 

Это работает, но это вызывает все элементы .drag сразу ... И я хочу только один я тащил, чтобы добавили все события.

Я попытался написать его:

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

или:

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

или:

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

Но все это не сработало. Есть ли у кого-то идеи?

UPDATE:

Я сделал JSFiddle многообещающий объясняет мою проблему.

https://jsfiddle.net/ke6d5r1h/

Как вы видите, класс .color, например, не только добавляется в DIV, который таскали, но и к другому. Это то, что я хочу изменить.

Answer 1

Используя обработчики событий console.log(arguments), я смог определить, что обработчикам передаются два аргумента: объект события и объект, содержащий контекст. Контекст имеет свойство $el, которое является объектом jQuery для целевой цели.

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

https://jsfiddle.net/85tffqhL/

e.target также даст вам ссылку на элемент.