JqueryUI Zugriff ändern Drag-Funktion

Question

Ich versuche, Zugriff zu erhalten und diese Funktion (zweite) in jqueryUI zu ändern. Ich habe alles versucht. Ich möchte etwas in die Funktion einfügen. Ich weiß, dass es möglich ist, und ich brauche, um so etwas zu tun:

var snapIt = $.ui.draggable.prototype.drag; 

$.ui.draggable.prototype.drag = function() { 
    console.log("hello"); // exemple of a thing I want to add 

    // Now go back to jQuery's original function() 
    return snapIt.apply(this, arguments); 
}; 

Oben wird es die Funktion hinzufügen, in der Konsole „Hallo“ und dann normal weiter mit dem Rest der jQuery-Funktion. Aber ich kann diese Funktion nicht finden. Ich weiß, das funktioniert nicht: $ .ui.draggable.prototype.start und Dutzende von anderen habe ich versucht.

$.ui.plugin.add("draggable", "snap", { 

    start: function(event, ui, i) { 

    click.x2 = event.clientX; 
     click.y2 = event.clientY; 

     var o = i.options; 

     i.snapElements = []; 

     $(o.snap.constructor !== String ? (o.snap.items || ":data(ui-draggable)") : o.snap).each(function() { 
      var $t = $(this), 
       $o = $t.offset(); 
      if (this !== i.element[0]) { 
//........... 

Ich will nicht die ziehen: function (event, ui) {..... muss ich die Funktion ändern, weil ich ui.position = {links verwenden ..... und Es macht die Snap-Methode nicht funktionieren. Der einzige Weg war, die Ziehmethode zu ändern. Ich weiß es funktioniert, weil ich es manuell versuchte. Aber eine Änderung der Bibliothek könnte für zukünftige Entwickler problematisch sein.

Ich weiß nicht, ob ich klar bin, aber im Grunde will ich den Pfad zu $ .ui.plugin.add ("ziehbare", "snap", {// Zeug}); in jQueryUI Bibliothek

Thx im Voraus

Answer 1

Es gibt 3 verschiedene Quellen von Verhaltensweisen, die auf den verschiedenen Veranstaltungen in jquery-ui, jede mit ihrer eigenen Struktur genannt werden.

Zuerst haben Sie die "privaten" Funktionen, die auf dem Prototyp definiert sind und die direkt auf native Ereignisse aufgerufen werden. Diese sind auf $.ui.draggable.prototype und beginnen mit einem _ Zeichen. Zum Beispiel haben Sie $.ui.draggable.prototype._mouseDrag Funktion. Diese werden direkt aufgerufen und sind diejenigen, die die Ereignisse auslösen. Sie sind nicht direkt von den Optionen zugänglich.

Dann haben Sie die Plugins-Funktionen. Dies sind diejenigen, die unter Verwendung von add hinzugefügt werden. Grundsätzlich was hinzufügen ist, dass es Funktionen auf die Ereignisse aufgerufen werden, die über die Optionen zugänglich sind. Und diese Plug-in-Callbacks werden aufgerufen, wenn die entsprechende Option wahr ist. Die Struktur geht so:

• Jedes Plugin ist ein Objekt, das einen Rückruf für verschiedene Ereignisse definiert. Die verfügbaren Ereignisse sind dieselben, auf die in den Optionen zugegriffen werden kann. Für ziehbare, haben Sie Start, Drag und Stop.
• Diese Rückrufe werden in Arrays geschoben, die in $ .ui.draggable.plugins Objekt enthalten sind, in dem jede Eigenschaft eines der verfügbaren Ereignisse ist.
• Eine Funktion durchläuft das Ereignisarray und validiert, ob das Plugin basierend auf der Option ausgeführt werden soll.

Sobald die Plugins fertig sind, werden die Optionen Callbacks aufgerufen. Dies sind diejenigen, die Sie in den Optionen festgelegt haben.

So je nachdem, was ou ändern möchten, können Sie entweder den Prototyp ändern:

$.ui.draggable.prototype._mouseDrag 

Oder Sie können ein Plugin hinzufügen.Wie folgt:

$.ui.plugin.add("draggable", "customPlugin", { 
drag: function(event, ui, draggable){ 
console.log("I'm the custom plugin"); 
}); 

Oder Sie können Snap-Plugin ändern. Dieser ist ein wenig komplizierter und viel weniger zuverlässig, da die Funktionen in Arrays und nicht in einem Objekt gespeichert sind, und sie werden hinzugefügt. Die Struktur lautet wie folgt:

• Jeder Eigenschaftsschlüssel ist ein Ereignis, und jede Eigenschaft ist ein Array von Arrays.
• Jedes Element des ersten Arrays ist der Name der Option mit dem Callback, also dem zweiten Element des Arrays.

So ist die Drag Rückruf $ .ui.draggable.prototype.plugins.drag Snap ist assoziiert [2], weil es der dritte Rückruf ist, das Ereignis zu ziehen hinzugefügt wurde. $ .ui.draggable.prototype.plugins.drag [2] [0] ist die Zeichenfolge "snap", mit der überprüft wird, ob die Option auf "true" gesetzt wurde. Und der Rückruf ist $ .ui.draggable.prototype.plugins.drag [2] [1]. So können Sie es wie folgt ändern:

$.ui.draggable.prototype.plugins.drag[2][1] = function(){ 
    console.log("I'm the modified plugin"); 
} 

Wenn Sie eine bessere Kontrolle möchten, können Sie durchlaufen $ .ui.draggable.prototype.plugins.drag Array und überprüfen Sie das erste Element, um sicherzustellen, Sie ändern das richtige Plugin. Offensichtlich müssen Sie den ursprünglichen Rückruf speichern, wenn Sie möchten, dass das Verhalten funktioniert.

hier sehen, wie das geht:

$.ui.plugin.add("draggable", "customPlugin", { 
 
    drag: function() { 
 
    console.log("%c I'm a custom plugin", 'color: blue'); 
 
    } 
 
}); 
 

 
var _temp = $.ui.draggable.prototype.plugins.drag[2][1]; 
 

 
$.ui.draggable.prototype.plugins.drag[2][1] = function() { 
 

 
    console.log("%c I'm the modified snap plugin drag callback", 'color: red'); 
 
    _temp.apply(this, arguments); 
 
} 
 

 
$('div').draggable({ 
 
    snap: true, 
 
    customPlugin: true, 
 
    drag: function() { 
 
    console.log("%c I'm the options callback", 'color: green'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div>Drag me</div> 
 
<div>Or me</div>