jQuery UI Droppable不被接受的事件

UI droppable爲一個項目，我想檢測與接受的事件相反。jQuery UI Droppable不被接受的事件

我的意思是，如果我拖放一個未被接受的容器做一些行動，到目前爲止我還沒有找到任何方法來檢測它。

2015-06-13 DannyG

發現使用revert選項爲可拖動的事件可以解決它。

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

來源

2015-06-14 04:13:58 DannyG

這很好，謝謝。剛剛跟進了一下。

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

來源

2017-03-23 14:52:37

您能否在您的答案的標題中包含您做了哪些更改？目前還不清楚代碼的靈感來源是什麼。 –

jQuery UI Droppable不被接受的事件

回答

相關問題