Javascript JQuery Draggable：根据条件从drop函数恢复

在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. 
            }
        });

可拖放代码

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

到目前为止，我尝试调用revert from drop函数：

 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

。换句话说，如果success为true，这意味着它将不会恢复，对吗？所以我假设Elem1在Drop1中成功地被删除了，稍后，如果我再次尝试将其拖动并将其放到其他地方（不可删除区域），它将不会恢复，并且我认为它的恢复值设置为false（因为我在调用revert from drop:function时重写了函数值），所以它不会还原

那么，如果条件在drop中失败，我如何恢复

---

n、 b我试图使用

接受

，但当我开始拖动时（甚至在悬停在可拖放区域上之前），当我记录$（这个）时，它似乎被触发了，它看起来像是在所有可拖放元素之间循环。

你能给你的可拖放元素指定特定的类，并根据可拖放元素中的类接受项目，这样如果它不被接受，它就会自动恢复。请用你的演示代码设置一个提琴，以便我们能找到更好的帮助：）我很快会设置一个提琴。似乎当我尝试使用accept时，over会因为某种原因停止工作。如果该元素不是有效的drop，那么它就没有意义表明它在它上面。因此，如果该元素不在“accept”中，则将该元素拖到可拖放项上不会触发“over”事件。而accept不应该被用作你试图接受的东西。你需要传递逗号分隔的选择器。阅读这里了解更多信息，这就是问题所在，我需要做的是，一旦拖动的元素悬停在空插槽上，我想将其背景更改为蓝色，如果允许，如果不允许，则更改为红色，这样用户就更容易意识到他试图在错误的位置添加玩家。到目前为止，我们做得很好。但是如果我使用accept，我就不会有UI功能了。在这一点上，我需要一个工作代码来尝试一些东西。我有一些想法，但不确定。