javascript - 根据预定义操作 HTML5/JS 启用/禁用拖放

Question

我已经使用w3school提供的指南在我的网站中实现了拖放功能http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrop_html 。现在我想做的是添加某种功能，允许用户使用拖放功能。

目前，访问我网站的任何人都可以拖放元素，但我想添加一项功能，例如，如果用户按键盘上的某个键或在特定文本字段中输入某个单词。

此外，不确定是否可以这样做，而不是使用文本字段，是否可以允许用户简单地单击网页/文档并输入一个不显示在屏幕上但在屏幕上显示的单词被网站收录。

我进行了研究，但没有发现任何有用的信息，因此欢迎任何帮助。

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

编辑:

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

Answer 1

首先是你的最后一个问题! 是的，这是可能的:

来源:https://stackoverflow.com/a/32236394/2543240

现在我们已经在字符串中获取了输入的代码，一个简单的 if 语句应该可以完成这项工作:

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

在您的 html 代码中，将 draggable 属性设置为 false:

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

检查这个Fiddle

编辑:不使用 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

编辑2:

添加一个按钮来激活拖动:

正如您在下面的评论中指出的。

检查这个Fiddle 3

编辑3:

如果您有多种情况，您可以定义一个类，例如为所有情况定义class="targets"。 然后迭代具有相同类的多个元素:

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

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