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

Answer 2

我不确定你是否考虑过使用jQuery的可拖动功能，但是API提供了一种非常简单的机制来启用/禁用拖动功能。这是一段代码片段

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

这是小提琴：https://jsfiddle.net/a5xktf0g/

在此示例中，验证基于按钮单击事件，您可以轻松地将验证绑定到按键事件并捕获按下的按键。将密钥附加到字符串并检查最后一个“n”字符是否与“n”字符验证字符串匹配。

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

2 个答案: