JqueryUI访问修改拖拽功能

JqueryUI access modify drag function

本文关键字：功能 修改 访问 JqueryUI      更新时间：2024-03-25

我正试图在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"中的函数插件，然后继续正常使用jQuery函数的其余部分。但是我就是找不到这个函数。我知道这不起作用：$.ui.draggable.protype.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]) {
//...........

我不想要拖拽：函数（event，ui）｛……我需要修改这个函数，因为我使用了ui.position＝｛left……，它使snap方法不起作用。唯一的方法是更改拖拽方法。我知道它起作用是因为我尝试了手动。但更改库可能会对未来的开发产生问题。

不知道我是否清楚，但基本上我想要$.ui.plugin.add的路径（"draggable"，"snap"，{//stuff}）在jqueryUI库中

Thx提前

jquery ui中有3个不同的行为源，它们对不同的事件进行调用，每个源都有自己的结构。

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

然后你就有了插件功能。这些是使用add添加的。基本上，add所做的是设置要在可通过选项访问的事件上调用的函数。如果这些插件的相应选项为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关联的拖动回调是$.ui.draggable.protype.plugins.drag[2]，因为这是添加到拖动事件.$的第三个回调。ui.draggable.prototype.plugins.drag[2][0]是字符串"snap"，用于检查该选项是否设置为true。回调是$.ui.draggable.protype.plugins.drag[2][1]。所以你可以这样修改它：

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

如果你想要更好的控件，你可以遍历$.ui.draggable.protype.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>

相关文章：