jQuery UI Droppable 不接受事件

Question

UI 一个项目可丢弃，我想检测与已接受事件相反的情况。

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

Answer 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
        }
   });

Answer 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>

jQuery UI Droppable 不接受事件

jQuery UI Droppable not accepted event

jquery

jquery-ui

droppable

jquery-ui-droppable