个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我已阅读 this question 的答案然后我想出了一个我想测试的练习。
有一个教育测验，您必须按照正确的顺序排列单词。
<html>
<head>
<style type="text/css">
body {background-color: black;}
#div3 {margin-left: 0px;width:720px;height:200px;padding:50px;border:1px solid #aaaaaa;
background-color: LightBlue;}
span { margin: 20px; padding: 20px; background-color:#FFFF88; font-size: 50px;border: 0px solid;
border-radius: 25px;box-shadow: 5px 5px 5px grey;}
#quiz {margin-left: 0px;width:720px;height:200px;padding:40px;border:1px solid #aaaaaa;
background-color: #FFFF88;}
#quiz1 {border-radius: 0px;-webkit-touch-callout: none;-webkit-user-select: none;
-khtml-user-select: none;-moz-user-select: moz-none;-ms-user-select: none;user-select: none;}
</style>
</head>
<body>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="word1" draggable="true" ondragstart="drag(event)">the</span>
<span id="word2" draggable="true" ondragstart="drag(event)">piano</span>
<span id="word3" draggable="true" ondragstart="drag(event)">play</span>
<span id="word4" draggable="true" ondragstart="drag(event)">I</span>
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
在线代码: http://jsfiddle.net/gmouzakitis/C2f4P/5/
已知错误 - 无法在第一个词之前拖放一个词 - 当您将一个词拖放到另一个词附近或上方时，它们会变成一个词 可拖动的对象。我不想要那个。
是否有另一种方法，使用其他 javascript 框架，如 angular.js、jQuery 等？
最佳答案
注意:最初的问题是“当您将一个词拖放到另一个词附近或上方时，它们变得像一个可拖动的”。从那时起，OP 更改了问题，因此请参阅下面(休息后)我解决当前问题的地方。
这里是你如何做到的。我只需要稍微调整一下你的 JavaScript:http://jsbin.com/borexihi/1/edit?js,output
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var currentText = $(ev.target).text();
$(ev.target).text($('#' + data).text() + ' ' + currentText);
$('#' + data).remove();
}
注意:我的解决方案确实使用了 jQuery
当前问题的答案:问题已更改，因此以下是我对更新版本的回答，其中询问“如何以正确的顺序排列给出的单词”.
重新排序元素有点棘手，这就是为什么我建议使用像 jQuery UI's sortable 这样的库.
我为您创建了一个 JSBin，将您的代码与库合并:http://jsbin.com/giqoxitu/1/edit?html,css,js,output .这是代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul id="sortable" class="div3">
<li id="word1" class="ui-state-default">The</li>
<li id="word2" class="ui-state-default">piano</li>
<li id="word3" class="ui-state-default">play</li>
<li id="word4" class="ui-state-default">I</li>
</ul>
</body>
</html>
CSS:
body {background-color: black;}
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 145px;
height: 90px;
font-size: 4em;
text-align: center;
}
.div3 {
margin-left: 0px;
height:200px;
padding:50px;
border:1px solid #aaaaaa;
background-color: LightBlue;
}
li {
margin: 20px;
padding: 20px;
border: 0px solid;
border-radius: 25px;
box-shadow: 5px 5px 5px grey;
}
JavaScript:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
关于javascript - 将单词按正确的顺序放置以通过拖放造句，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24982021/
24
4
0
我想生成一个句子作为输入词。 例如。 输入: Mary chase the monkey 输出: Mary chases the monkey. 这可以使用 simpleNLG 库来完成:http:/
到目前为止我有 def attack(words): words = ['noun', 'verb', 'adjective', 'place'] print('Use your'
我在 Win7 上使用 Python 3.2。我用 ASCII 码写了这个: print (''.join((chr(i+22) for i in (50,75,90,90,99)))) print
我是一名优秀的程序员,十分优秀！