Drag Drop Spambots

Defeat Spambots with dragula

Drag and Drop with Drgaula

This is a simple 13kb .js its init.js and .scss using a lightweight flawless way to defeat spambots.

Use a submit button that has to be dragged using dragula to its posting position into the form, dragging to the left to post that form.

No bot or computer can figure this out so spam is defeated, except by the jerks comments or reviews based on non-sense. Then I just blacklist them in CloudFlair and that blocks them from CloudFlare servers, that will really make there day.

Yea! Goodbye recaptcha and honeypots.

The draggable button

Download dragula from is dist folder in draguala Github Repo. Or follow its npm installation instructions.

Note in using this I noticed dragula uses some of the .js files from the node-modules/dragula, So the best case normally would be to use the CDN for dragula

<div class="parent"> // All movable items with class="parent"
   <div class="wrapper"> // Then all items need to be in a wrapper
        <div class="form-group">
           <label for="name">Full Name</label>
           <input type="text" name="fields[name]" id="name" placeholder="Enter your name..." required autofocus>
        // Other inputs email, title, message...
        <div class="form-group"> // Button moved upon the on form
           <div id="left-defaults" class="container">
           <div class="">Moving the button here</div>
      </form> // The button is placed anywhere outside of the form to be dragged to the form
        <div id="right-defaults" class="container">
            Move this button to submit the contact form.
          <div><input type="submit" value="Send Message" class="btn btn--primary"></div>

Add javaScript

Adding dragula to my scripts.html

{% if page.support contains 'dragula' %}
<script src="{{ '/assets/js/vendor/dragula/dragula.min.js' | relative_url }}"></script>
dragula([document.getElementById(left-defaults), document.getElementById(right-defaults)])
  .on('drag', function (el) {
    el.className = el.className.replace('ex-moved', '');
  }).on('drop', function (el) {
    el.className += ' ex-moved';
  }).on('over', function (el, container) {
    container.className += ' ex-over';
  }).on('out', function (el, container) {
    container.className = container.className.replace('ex-over', '');
{% endif %}

Page frontmatter

Add the below to any page you want to use dragula on.

support: [dragula]

The Sass or css

Adding everything to make this work its scripts, scss, frontmatter and dragula.js = less than 13kb.

.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
.gu-hide {
display: none !important;
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);

Dragula Example

Drag any of the contents below within its class .parent and class .wrapper div’s.

More interactive use cases lie ahead
Moving them anywhere else isn't quite possible
Moving <input/> elements works just fine. You can still focus them, too.
This is the default use case. You only need to specify the containers you want to use
Anything can be moved around. That includes images, links, or any other nested elements.
Make sure to check out the documentation on GitHub!
You can move these elements between these two containers
There's also the possibility of moving elements around in the same container, changing their position

 Comment Form

Add A Page Review

Add A Rating: 
Agree to our Terms and Conditions  *