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

最重要的是它将在控制台“hello”中添加函数add，然后正常继续使用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]) {
//...........

我不想拖动：function（event，ui）{..... 我需要修改函数，因为我使用ui.position = {left .....它使snap方法不起作用。唯一的方法是更改拖动方法。我知道它有效，因为我尝试过manualy。但是改变图书馆可能会给未来发展带来问题。

不知道我是否清楚，但基本上我想在jqueryUI中找到 $。ui.plugin.add（“draggable”，“snap”，{// stuff}）; 的路径文库

提前谢谢

Answer 1

在jquery-ui中的不同事件上调用了3种不同的行为源，每种事件都有自己的结构。

首先，您拥有“私有”函数，这些函数在原型上定义，并且直接在本机事件上调用。它们位于$.ui.draggable.prototype上，以_字符开头。例如，您具有$.ui.draggable.prototype._mouseDrag功能。这些是直接调用的，是触发事件的那些。它们不能直接从选项中访问。

然后你有插件功能。这些是使用添加添加的。基本上添加的作用是它设置要在可通过选项访问的事件上调用的函数。如果相应的选项为true，则会调用这些插件回调。结构如下：

每个插件都是一个定义不同回调的对象事件。可用的事件与选项中可访问的事件相同。对于可拖动，您有开始，拖动和停止。
这些回调在包含的数组中推送 $ .ui.draggable.plugins对象，其中每个属性都是可用事件之一。
一个函数遍历事件数组并验证插件是否正确应根据选项集运行。

插件完成后，将调用选项回调。这些是你在选项中设置的那些。

因此，根据您要修改的内容，您可以更改原型：

$.ui.draggable.prototype._mouseDrag

或者您可以添加插件。像这样：

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

或者您可以修改snap插件。这个更复杂，更不可靠，因为函数存储在数组中而不是存储在对象中，并且它们被添加。结构如下：

每个属性键都是一个事件，每个属性都是一个数组阵列。
每个数组的第一个元素是相关选项的名称使用回调，这是数组的第二个元素。

因此，与snap关联的拖动回调是 $。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>

JqueryUI访问修改拖动功能

1 个答案: