Hiding spam with drag and drop using jQuery

To use capchtas are horrible. If you make a mistake you can start again. I hate it. So the idea is to use the drag and drop functionality of jQuery on which the user can proof he is a human and no script.

We’ll need the following jQuery plugins:

• jQuery core
• jQuery widget
• jQuery mouse
• jQuery draggable
• jQuery droppable

We create a simple form with two input fields:

<form name="mailform" method="post" action="" />
   <input type="text" name="input_1" />
   <input type="text" name="input_2" />
</form>

And we need a box which contains the drag an drop items and a paragraph as info box:

<div class="sender">  
   <p class="droppable"></p>   
   <p class="draggable"></p>
   <p class="mail_note">Vielen Dank für Ihre Nachricht!</p>
</div>

The styling:

.sender {
    position: relative;
    height: 90px;
    width: 300px;
    margin: 20px;
}
.sender p.draggable {
    background: url(../images/mail.png) no-repeat;
    width: 57px;
    height: 42px;
    padding: 0;
    margin: 0;
    float: left;
    cursor: all-scroll;
    position: relative;
}
.sender p.droppable {
    background: url(../images/postbox.png) no-repeat;
    width: 70px;
    height: 90px;
    padding: 0;
    margin: 0;
    right: 10px;
    position: absolute;
}
.sender .mail_note {
    position: fixed;
    width: 360px;
    top: 200px;
    left: 50%;
    margin-left: -180px;
    padding: 25px 15px;
    background-color: #ffe691;
    border: 1px solid #f6db7b;
    color: #7d5912;
    font-size: 20px;
    text-shadow: 1px 1px 1px #fff;
    text-align: center;
    border-radius: 5px;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.6);  
    cursor: default;
    display: none;
}

The javascript:

//+++ drag event +++ restrict the movement +++//

$( ".draggable" ).draggable({                        
    containment: ".sender"                           
});

//+++ drop event +++ fade in notice +++ fade out drag item +++//

$( ".droppable" ).droppable({                        
    drop: function( event, ui ) {
        $( ".mail_note" ).fadeIn();                  
        $( ".draggable" ).fadeOut();                 

//+++ paused animation 3sec +++ animate notice +++ submit form +++//

                                        
        setTimeout(function(){                       
            $( ".mail_note" ).animate({             
               top:'170px',                          
               opacity:'0'                          
            },500);
            document.forms["mailform"].submit();
        },3000);
     }
});