jQuery UI Droppable непринятое событие

UI droppable для проекта, я хотел бы обнаружить противоположность принятому событию.jQuery UI Droppable непринятое событие

Я имею в виду, что если я перетащил не принятый контейнер, сделайте какое-то действие, до сих пор я не нашел способа обнаружить его.

источник

2015-06-13 DannyG

Обнаружилось, что использование опции revert для draggable Событие может решить проблему.

$("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

Можете ли вы включить в заголовок своего ответа, какие изменения вы сделали? Неясно, что послужило источником вдохновения для вашего кода. –

ответ

Смежные вопросы