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>