声明每个 shuffle 字符串数组元素

Question

我想要的是创建一个标签或将其声明为每个 shuffles 字符串数组元素的东西，这样我就可以将每个 shuffles 字符串数组元素应用于 drop 和 drop。 .所以有三个字符串数组元素。在下面的代码中应用 shuffle 函数后，它将显示如下

 <script>
 //Parses the variable from php to this Javascript part
 var js_var = "<?php echo $output ?>";

 //document.write(js_var);

 //Splits the string when the delimiter # is detected
  var split_str= js_var.split("#");
 //var js_var = "Try123";
 //displays original string
  document.writeln(js_var+"<br >"+"<br >");


 //sent to shuffle(o) function to scramble the elements
  var shuffle_str = shuffle(split_str);

 //displays each of the shuffled string array elements
  for (i=0;i<shuffle_str.length;i++)
{
 document.write(shuffle_str[i] + "<br >");
}

 //document.writeln(js_var);

 function shuffle(o){ //v1.0
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j]  
   = x);
  return o;
};


</script>

<button id="showcontent" onclick="window.location.reload()">Scramble</button>

</body>

Answer 1

我会用类似 jQuery UI Sortable 这样的东西来做到这一点

演示：http://jsfiddle.net/BGDEe/

HTML：

<ul id="sortable">
    <li class="ui-state-default">Jane likes</li>
    <li class="ui-state-default">to</li>
    <li class="ui-state-default">read book</li>
</ul>

CSS：

 #sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 #sortable li {
     margin: 3px 3px 3px 0;
     padding: 1px;
     float: left;
     font-size: 12px;
     text-align: center;
     cursor: pointer;
     border-color: transparent;
     background: none;
 }
 #sortable li.ui-state-highlight {
    height: 15px;
    width: 20px;
 }
 #sortable:hover li {
     border-color: #d3d3d3;
     background-color: #FFFFFF;
 }

JS：

$("#sortable").sortable({
    cursor: 'move',
    placeholder: "ui-state-highlight",
    update: function () {}
});
$("#sortable").disableSelection();

这将很好地处理拖放，如果你想处理拖放结果，你只需在 update: function () {} 中添加代码。

剩下的就是生成适当的 HTML，其中每个单词都在单独的 <li> 元素中以便拖放发生，并使用像 class="shuffle-word" 这样的类，而不是我当前的 id="sortable"，并更改 jQuery适当的选择器。

由于您的问题和示例很难理解，我将保留我的示例，希望您能够自己解决。

我会补充一点，你生成 HTML 的部分就是这个

//displays each of the shuffled string array elements
document.write('<ul class="shuffle-word">');
for (i=0; i < shuffle_str.length; i++) {
    document.write('<li class="ui-state-default">'+shuffle_str[i]+'</li>');
}
document.write('</ul>');

然后你正确地初始化它（但记得把所有东西都放在文档就绪事件回调中）

$(".shuffle-word").sortable({
    cursor: 'move',
    placeholder: "ui-state-highlight",
    update: function () {}
});
$(".shuffle-word").disableSelection();

并随心所欲地设计它。请注意，我的解决方案需要 jQuery、jQuery UI 和 jQuery UI CSS（可选，如果您自己添加更多 CSS）。