Question

我很难在Drop中被拒绝后找出如何恢复被拖动的元素。我的页面结构如下：

我有一个右侧的足球运动员名单和一个足球场，在升降机侧有球员的位置。我想让用户从列表中拖动玩家并将其放在他们的插槽上。该列表包含不同类型的球员，如守门员，防守队员......等。该字段还包含适用于不同类型玩家的插槽。每个玩家类型都有一些可以放入的插槽。如果用户试图插入错误的插槽，则必须恢复播放器。

可拖动代码

 $(".list_player_jersey img").draggable({
    addClasses: false,
    helper: "clone",
    start: function(event, ui) {
       //some code here ... 
       //assign ui to a global variable 
       //animate ui and change it's size while being dragged.
    },
    revert: function(success) {
         //change some img src 
         afterRelease();//animate ui back to it's original size while it's reverting. 
         return !success;
    },
    stop: function() {
        checkDenyClick(false);
    },
    cursor: "pointer",
    cursorAt: {"left": 25}
});

可停放代码

  $(droppableItems).droppable({
            tolerance: "pointer",
            drop: function(event, ui) {
                var dropItem = $(this);
                var dragItem = $(ui.draggable);
                var data = validatePosition(dragItem, dropItem);
                if (data.status === true) {
                     //success code, continue normally from here, do other calculations
                }
                else
                {
                  // Here I want to revert back ui
                }       
             afterRelease();
            },
            accept:function (ui){
                //I don't' how to use this part                
            },
            over: function(event, ui) {
                 // adding come classes
            },
            out: function() {
                //removing some classes. 
            }
        });

到目前为止我尝试的是从drop函数调用revert：

 drop: function(event, ui) {
         //..some code
          var success= false;
         if (data.status === true) {
                  //success code, continue normally from here, do other calculations
                   success= true;
                }
                else
                {
                  // revert back ui
                    success= false;
                }

       ui.draggable.draggable('option', 'revert', function() {
            afterRelease();
            return !success;
        }
    }

但问题是，如果success成为true，则该特定元素将保持true。换句话说，如果成功是真的意味着它不会恢复正确吗？所以我让他们说Elem1成功地在Drop1中被删除，之后，如果我再次尝试拖动它并将其放在其他地方（不可行的区域））它没有恢复，我认为它的恢复值设置为假（因为我在从drop：function调用revert时覆盖了函数值）并且它不会恢复。

那么，如果条件在丢弃内失败，我该如何恢复？

nb我尝试使用accept，但是一旦我开始拖动（甚至在悬停在可放置区域之前）它似乎被解雇了，当我记录$（this）时，它显示为如果它循环通过所有可放置的元素。

JQuery Draggable：从drop函数恢复条件

0 个答案: