CODEWITHSUNDEEP
javascriptjqueryhtmldrag-and-drop
Henry
Henry

Reputation: 1042

Enabling/disabling drag and drop based on pre-defined action HTML5/JS

I have used the guide provided on w3school to implement a drag and drop function in my website http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrop_html. Now what I wish to do is add a function of some sort that grants premission to user to use the drag and drop function.

Currntly anyone visiting my website can drag and drop elements but I want to add a feature, say for example, if user presses certain key on the keyboard or input certain word inside a specifc textfield.

Also, not sure if this is possible to have this, instead of having a textfield is it possible to allow the user to simply click on the webpage/document and type in a word that doesn't display on the screen but is being picked up by the website.

I have researched but haven't found anything useful to follow so any help is welcomed.

jquery validation based on drag & dropped items

http://www.webdeveloper.com/forum/showthread.php?299067-Javascript-Drag-and-Drop-Function-with-validation%28Kindly-help-me-to-solve-this-prob%29

EDITED:

  var code = "";
    window.addEventListener("keydown",function(e) {
        code = (code+String.fromCharCode(e.keyCode || e.which)).substr(-11);
        if (code == "SECRET" ) {
            for(i = 0, i <=20, i++) {
            document.getElementById("dragID" + i).setAttribute("draggable", "true");
            alert('unlocked');
        }
}
    },false);

Upvotes: 2

Views: 112

Answers (2)

ptvty
ptvty

Reputation: 5664

First your last question! Yes it's possible:

source: https://stackoverflow.com/a/32236394/2543240

So now that we have picked up the entered code in a string, a simple if statement should do the job:

var code = "";
window.addEventListener("keydown",function(e) {
    code = (code+String.fromCharCode(e.keyCode || e.which)).substr(-11);
    if (code == "SECRET" ) {
        $('#dragtarget').attr('draggable', "true");
        alert('unlocked');
    }
},false);

In your html code, set draggable attribute to false:

<p ondragstart="dragStart(event)" draggable="false" id="dragtarget">Drag me!</p>

check this Fiddle

Edit: Without using jQuery:

var code = "";
window.addEventListener("keydown",function(e) {
    code = (code+String.fromCharCode(e.keyCode || e.which)).substr(-11);
    if (code == "SECRET" ) {
        document.getElementById("dragtarget").setAttribute("draggable", "true");
        alert('unlocked');
    }
},false);

Fiddle 2

Edit2:

Add a button to activate dragging:

As you noted in your comment bellow.

Check this Fiddle 3

Edit3:

If you have multiple cases you can define a class, for example class="targets" for all of them. Then iterate through multiple elements with same class:

var x = document.getElementsByClassName("targets");

for (var i=0; i < x.length; i++) {
    x[i].setAttribute("draggable", "true");
}

Upvotes: 1

Saharsh
Saharsh

Reputation: 760

I am not sure if you considered using jQuery's draggable feature, but the API exposes a very simple mechanism for enabling/disabling drag-ability among other things. Here's a code snippet

$("#draggable").draggable({
revert: true
});
$("#droppable").droppable();

And here's the fiddle: https://jsfiddle.net/a5xktf0g/

In this example, the validation is based on button click event, you could easily tie the validation to a key-up event and capture the key that was pressed. Append the key to a string and check the last "n" characters if they match your "n" character validation string.

Upvotes: 1

Related Questions