Jquery ui 向jQuery draggable revert添加函数；事件“； 我所拥有的：

我有一个可拖动的div，其revert参数设置为“invalid”

我需要的是： 当还原发生时，我想触发对另一个元素的CSS更改

问题是： “revert”是一个参数，而不是一个事件，因此当发生revert时，我在触发所需的CSS更改方面遇到了很大的困难

我的代码： 我所尝试的： 我尝试将“还原”用作事件，但未成功：

revert: function(event, ui) {
    $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
},

我还尝试让revert参数执行此函数，但未成功：

function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
        return true;
     }
     else
     {
        //return false so that the peg does not revert
        return false;
     }
  }

背景： 我正在拖动一个div，当拖动时，背景图像会发生变化，当拖动恢复时，背景图像会恢复到其原始状态

我的问题:

---

当在拖动时进行还原时，如何触发对另一个元素的CSS更改？

事实证明，还原可以接受一个方法。请参见以下完整示例：

具体而言：

$(function() {
    $("#ducky").draggable({
        revert: function(is_valid_drop){
            console.log("is_valid_drop = " + is_valid_drop);
            // when you're done, you need to remove the "dragging" class
            // and yes, I'm sure this can be refactored better, but I'm 
            // out of time for today! :)
            if(!is_valid_drop){
               console.log("revert triggered");
                $(".pond").addClass("green");
                $(this).removeClass("inmotion");
               return true;
            } else {
                $(".pond").removeClass("green");
                $(this).removeClass("inmotion");
            }
        },
        drag: function(){
            // as you drag, add your "dragging" class, like so:
            $(this).addClass("inmotion");
        }
    });
    $("#boat").droppable({
      drop: function( event, ui ) {
        $(this)
          .addClass("ui-state-highlight");
      }
    });
  });

---

希望这有助于。。。我猜无论您试图修改什么都是问题所在，而不是试图在函数调用中使用revert。再次查看您试图设置的CSS，看看是否存在您的问题。

您希望执行以下操作：

 $('#peg_icon').draggable({
        revert: function (socketObj) {
        if (socketObj === true) {
            // success
            return false;
        }
        else {
            // reverting
            return true;
        }
    },
        scroll: false,
        stack: "#peg_icon",
        drag: function(event, ui) {
            $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
        }
    });

演示：

---

希望这有帮助

具体地说，我不使用.css（）方法，而是使用addClass（）将类添加到您的可拖动。。。在CSS中更改图标，而不是在Javascript中更改图标，这样当您恢复时，您所要做的就是从您的Dragable中调用.removeCSS（'drag-indicator-class'），图像将自动恢复为默认值。感谢您提供全面的答案、代码和工作示例。次要提示：我不知道类可以附加到CSS中的id中，即

\some\u id.some\u class

。这是我第一次看到这种选择器。我用的是

！重要信息

强制

.inmotion

类覆盖默认的

#peg_图标

id。问题：使用addClass/removeClass代替JavaScript方法有什么好处？是否使用一个开/关操作而不是两个单独的操作？我最初使用JavaScript方法的原因主要是基于这样一种迷信，即默认和“动态”背景图像不会通过CSS预加载，而且JavaScript方法“强制”在背景图像之间更快地切换。简单地说，这两种方法（即CSS vs JavaScript）预加载或加载背景图像的速度比另一种更快吗？其优点在于灵活性，并将表示与逻辑分离。在某些时候，您可能希望重用代码，或者更改所使用的图像。CSS是这类信息的归属，在CSS中更改它比直接在JS中更改更不可能无意中引入错误。我无法回答问题的预加载部分。。。这是我必须研究的，但通过JS强制这样做也意味着引入更多的HTTP请求（每次切换图像一个请求），这与缓存的css相比也是低效的，相反，它是一个成功放置的可放置元素。感谢代码和Fiddle演示。出于某种原因，此代码阻止我将#peg_图标拖放到辅助拖放区域（即拖放区域以外的拖放区域）。我理解，我在上述问题中提供的有限背景可能是造成这一问题的原因。旁注：我被你们那个吓人的笼子头像弄得有点精神创伤。我只是想说，这个问题经过深思熟虑，沟通得很好！感谢。

 $('#peg_icon').draggable({
        revert: function (socketObj) {
        if (socketObj === true) {
            // success
            return false;
        }
        else {
            // reverting
            return true;
        }
    },
        scroll: false,
        stack: "#peg_icon",
        drag: function(event, ui) {
            $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
        }
    });