向jQuery可拖动的还原“事件"添加功能. [英] Adding a function to jQuery draggable revert "event"

问题描述

我有一个可拖动的div，其还原参数设置为无效".

I have a draggable div with a revert parameter set as "invalid".

发生还原时，我想触发将CSS更改为另一个元素.

When the revert occurs I want to trigger a CSS change to another element.

还原"是参数而不是事件，因此在发生还原时，在触发所需的CSS更改时遇到很大的困难.

"revert" is parameter rather than an event so I'm experiencing great difficulty in triggering the required CSS change when the revert occurs.

$('#peg_icon').draggable({
    revert: 'invalid',
    scroll: false,
    stack: "#peg_icon",
    drag: function(event, ui) {
        $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
    }
});

我尝试过的事情:

我没有尝试使用还原"作为事件:

What I've tried:

I've unsuccessfully attempted using "revert" as an event:

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

我也尝试使用恢复参数来执行此功能，但未成功:

I've also unnsuccesfully tried to get the revert paramater to take this function:

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，当它被拖动时，背景图像会发生变化，而当拖动恢复时，背景图像会恢复为原始状态.

Context:

I'm dragging a div that when dragged, the background-image changes and when the drag reverts, the background-image is restored to its original state.

在拖动上发生还原时，如何触发CSS更改为另一个元素?

How do I trigger a CSS change to another element when revert occurs on a drag?

推荐答案

事实证明，还原可以接受方法.参见以下完整示例: http://jsfiddle.net/mori57/Xpscw/

It turns out that revert can accept a method. See this for a complete example: http://jsfiddle.net/mori57/Xpscw/

特别是:

$(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");
      }
    });
  });

希望这会有所帮助...我猜您正在尝试修改的只是问题，而不是尝试在函数调用中使用还原.再次查看您要设置的CSS，并查看是否存在问题.

Hope this helps... I'm guessing that whatever you were trying to modify was the issue, not the attempt to use revert with a function call. Take a look again at what CSS you were trying to set, and see if maybe your issue was in there.

这篇关于向jQuery可拖动的还原“事件"添加功能.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！