给jQuery可拖拽组件添加一个回弹“事件”函数

Question

给jQuery可拖拽组件添加一个回弹“事件”函数

jquery-uirevertjquery-draggable

24

我当前的情况：

我有一个可拖动的 div 元素，其 revert 参数设置为 "invalid"。

我的需求：

当 revert 发生时，我想触发另一个元素的 CSS 改变。

问题所在：

"revert" 是一个参数而不是事件，因此当 revert 发生时，我很难触发所需的 CSS 改变。

我的代码：

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

我尝试过的:

我曾尝试使用"revert"作为事件，但未成功:

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 样式的更改？

- Dominor Novus

4

只是想说，这个问题思考得非常周全并且表达清晰！ - Jason M. Batchelor

感谢您的认可。 - Dominor Novus

2个回答

1

你想做这样的事情：

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

DEMO: http://jsfiddle.net/yTMwu/35/

希望这可以帮到你！

- Dom

3

感谢提供代码和Fiddle演示。由于某些原因，这段代码阻止了我将#peg_icon放置到次要的放置区域（即除正在拖动的放置区域之外的放置区域）。我知道我在之前的问题中提供的上下文有限，可能导致了这个问题。顺便说一句：你的可怕凯奇头像让我感到有些受创。 - Dominor Novus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason M. Batchelor · Accepted Answer

原来 revert 命令可以接受一个方法。请参考以下完整示例： 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，看看问题是否可能出在那里。