jQuery UI Droppable 不接受事件答案

【问题标题】：jQuery UI Droppable not accepted eventjQuery UI Droppable 不接受事件
【发布时间】：2015-06-13 23:37:14
【问题描述】：

项目的 UI 可放置，我想检测与接受的事件相反的事件。

我的意思是，如果我拖放一个不被接受的容器做一些动作，到目前为止我还没有找到任何方法来检测它。

【问题讨论】：

标签： jquery jquery-ui droppable jquery-ui-droppable

【解决方案1】：

发现对draggable事件使用revert选项可以解决这个问题。

$("selector").draggable({
    revert : function(droppableContainer) {
            if(droppableContainer) {
                // drop is valid
            }else {
                // drop is invalid
            }
            return(!droppableContainer) //returns the draggable to its original position
        }
   });

【讨论】：

【解决方案2】：

效果很好，谢谢。刚刚在下面跟进了一下。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {


    //The red div becomes draggable
    $(".red").draggable({
    revert : function(droppableContainer) {
            if(droppableContainer) {
                //If it's droppable : 
                alert('valid');
                $(this).css("visibility", 'hidden');
            }else {
                //if it's not droppable : 
                alert('invalid');
            }
            return(!droppableContainer) //returns the draggable to its original position
        }
   });

    //The pink div becomes draggable
    $(".pink").draggable({
    revert : function(droppableContainer) {
            if(droppableContainer) {
                //If it's droppable : 
                alert('valid');
                $(this).css("visibility", 'hidden');
            }else {
                //if it's not droppable : 
                alert('invalid');
            }
            return(!droppableContainer) //returns the draggable to its original position
        }
   });


    $(".dropdiv").droppable({accept: '.pink',});

    });


  </script>
</head>
<body>

<div class="ui-widget-content red" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid red;">
  <p>Drag</p>
</div>

<div class="ui-widget-content pink" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid pink;">
  <p>Drag</p>
</div>

<div class="dropdiv ui-widget-header" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid black;">
  <p>Drop here</p>
</div>

</body>
</html>

【讨论】：

您能否在答案的标题中包含您所做的更改？您的代码的灵感来源也不清楚。