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