Question

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

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

Answer 1

发现使用可拖动事件的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不被接受的事件

2 个答案: