JqueryUI訪問修改拖動功能

Question

我想在jqueryUI中獲取並修改這個函數（第二個）。我已經嘗試了一切。我想要做的是在函數中添加一些東西。我知道這是可能的，我需要做的是這樣的：

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); 
}; 

在頂部它將得到功能控制檯「你好」添加，然後用jQuery函數的其餘部分繼續正常運行。但我無法找到這個功能。我知道這是行不通的：$ .ui.draggable.prototype.start和其他幾十個我試過的。

$.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]) { 
//........... 

我不想拖累：函數（事件，UI）{.....我需要，因爲我用它來修改功能ui.position = {左.....和它使快照方法不起作用。唯一的方法是改變拖曳方法。我知道它工作，因爲我試圖手動。但改變圖書館可能會對未來的發展產生影響。

不知道我是否清楚，但基本上我想要的路徑爲$ .ui.plugin.add（「draggable」，「snap」，{// stuff}）;在jQueryUI的庫

THX提前

Answer 1

有3個不同的行爲的來源被稱爲在jQuery的UI不同的事件，每個都有自己的結構。

首先，您擁有「私有」功能，這些功能在原型上定義並直接在本機事件上調用。這些在$.ui.draggable.prototype上，並以_字符開頭。例如你有$.ui.draggable.prototype._mouseDrag功能。 這些被直接調用，並觸發事件。他們不能直接從選項中訪問。

然後你有插件功能。這些是使用添加添加的。基本上什麼加確實是它設置函數調用通過選項可訪問的事件。如果它們的相應選項爲真，則會調用這些插件回調。結構如下：

• 每個插件都是爲不同的 事件定義回調的對象。可用的事件與選項中可訪問的相同。對於可拖動，您有開始,拖動和停止。
• 這些回調被推送到 $ .ui.draggable.plugins對象包含的數組中，其中每個屬性都是可用事件之一。
• 函數會遍歷事件數組，並驗證插件 是否應基於選項集運行。

一旦插件完成，選項回調被調用。這些是你在選項中設置的。

那麼根據什麼甌要修改，您可以更改原型：

$.ui.draggable.prototype._mouseDrag 

或者你可以添加一個插件。像這樣：

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

或者您可以修改快照插件。這一個比較複雜一些，因爲函數存儲在數組中而不是存儲在一個對象中，所以它們會更加複雜一些，並且它們會被添加。結構如下所示：

• 每個屬性鍵都是一個事件，每個屬性都是一個數組 數組。
• 數組第一個元素中的每一個都是與回調關聯的選項的名稱 ，即該數組的第二個元素。

所以相關搶購的阻力回調$ .ui.draggable.prototype.plugins.drag [2]，因爲它是一個已經加入到拖動事件的第三個回調。 $ .ui.draggable.prototype.plugins.drag [2] [0]是字符串「snap」，用於檢查選項是否設置爲true。回調是$ .ui.draggable.prototype.plugins.drag [2] [1]。所以，你可以修改它是這樣的：

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

如果你想有一個更好的控制，您可以通過$ .ui.draggable.prototype.plugins.drag陣列迭代和檢查的第一要素，以確保您修改正確的插件。 很明顯，當你嘗試時，如果你想讓行爲起作用，你需要存儲原始的回調。

在這裏看到如何去：

$.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>