如何禁用div（s），直到前一个div被填入
我目前正在进行拖放测验，作为一个开始，我有四个问题，其中可以选择答案并将其放入相应的问题中。我想禁用问题2,3,4的下拉框，直到问题1得到解答。然后重新激活q2，留下3,4禁用等等......我对JavaScript很新，并尝试了多种方法来做到这一点，包括在这里查看类似于我的其他情况，但还是成功了！到目前为止，我已经对测验进行了截图，希望能让它更清晰。
希望有人能提供帮助，谢谢！
我的所有代码如下：
HTML：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="draganddrop.js"></script>
</head>
<body>
<div id="container">
<h1>SAN Failure</h1>
<p>Your SAN's RAID controller has failed and corrupted a significant amount of data. You need to contact your DR provider failover to your recovery environment whilst you restore your internal servers from backup images.</p>
</div>
<div id="mainContainer">
<div id="dragScriptContainer">
<div id="questionDiv">
<p><strong>Task one: Damage Control</strong></p>
<div class="dragDropSmallBox textbox" id="q1">1. Find the relevant IP address for the affected hardware</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox" id="q2">2. Notify your disaster recovery provider</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox" id="q3">3. Inform the team of directors of the situation</div><div class="destinationBox"></div>
<div class="dragDropSmallBox textbox disabled="true"" id="q4">4. Update the emergency phone message</div><div class="destinationBox"></div>
</div>
<div class="feedback">
<div id="feedback"></div>
<div id="counter">0</div>
<div id="result"></div>
</div>
<div class="container">
<h1 style="text-align:center">Disaster Recovery Runbook</h1>
<!-- Page 1 -->
<h5 style="color: red; ">Page 1</h5>
<h2>Executive Summary</h2>
<p>[ACME Ltd. company information]<br>ACME Ltd. currently has 9 virtual servers and 4 physical servers all hosted at an onsite data centre.<br>The key IT staff required for recovery are [IT Manager], [Backup Manager] and [Disaster Recovery Provider]. The servers must be recovered within 8 hours of invocation.
</p>
<!-- Page 2 -->
<h5 style="color: red; ">Page 2</h5>
<h2>Contents</h2>
<p><strong>
Invoking Disaster Recovery<br>
Key Contacts<br>
Call Tree<br>
Emergency Phone Message<br>
Network Diagram<br>
Recovery Locations<br>
Software License and Registration Keys<br>
Event Log<br>
Recovery Templates
</strong></p>
<!-- Page 3 -->
<h5 style="color: red; ">Page 3</h5>
<h2>Invoking Disaster Recovery</h2>
<p>If a crisis or disaster has occurred, the business continuity manager must decide the course of action. If, for whatever reason, the business continuity manager is unable to perform these duties, refer to the cascading decision-making hierarchy below.<br>Only the most senior member is authorized to invoke the DR plan, subject to availability.<br>1. Business Continuity Manager<br>2. IT Director<br>3. IT Manager<br>4. IT Administrator<br>In the event none of the stated staff members are available...good luck.</p>
<div id="answerDiv">
<!-- Page 4 -->
<h5 style="color: red; ">Page 4</h5>
<h2>Key Contacts</h2>
<main class="flex-center">
<table>
<tr>
<td><p><strong>Contact</strong></p></td>
<td><p><strong>Telephone Number</strong></p></td>
<td><p><strong>Email Address</strong></p></td>
</tr>
<tr>
<td><p>Managing Director</p></td>
<td><div class="dragDropSmallBox" id="a3">0123456789</div></td>
<td><div class="dragDropSmallBox" id="a10">M.D@acme.com</div></td>
</tr>
<tr>
<td><p>Financial Director</p></td>
<td><div class="dragDropSmallBox" id="a10">1234567890</div></td>
<td><div class="dragDropSmallBox" id="a10">F.D@acme.com</div></td>
</tr>
<tr>
<td><p>Business Continuity Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">2345678901</div></td>
<td><div class="dragDropSmallBox" id="a10">B.C.D@acme.com</div></td>
</tr>
<tr>
<td><p>Sales Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">3456789012</div></td>
<td><div class="dragDropSmallBox" id="a10">S.M@acme.com</div></td>
</tr>
<tr>
<td><p>Production Manager</p></td>
<td><div class="dragDropSmallBox" id="a10">4567890123</div></td>
<td><div class="dragDropSmallBox" id="a10">P.M@acme.com</div></td>
</tr>
<tr>
<td><p>HR Director</p></td>
<td><div class="dragDropSmallBox" id="a10">5678901234</div></td>
<td><div class="dragDropSmallBox" id="a10">H.R.D@acme.com</div></td>
</tr>
<tr>
<td><p>Backup Manger</p></td>
<td><div class="dragDropSmallBox" id="a10">6789012345</div></td>
<td><div class="dragDropSmallBox" id="a10">B.M@acme.com</div></td>
</tr>
<tr>
<td><p>Power Supplier</p></td>
<td><div class="dragDropSmallBox" id="a10">7890123456</div></td>
<td><div class="dragDropSmallBox" id="a10">P.S@acme.com</div></td>
</tr>
<tr>
<td><p>Internet Supplier</p></td>
<td><div class="dragDropSmallBox" id="a10">8901234567</div></td>
<td><div class="dragDropSmallBox" id="a10">I.S@acme.com</div></td>
</tr>
<tr>
<td><p>Disaster Recovery Supplier</p></td>
<td><div class="dragDropSmallBox" id="a2">9012345678</div></td>
<td><div class="dragDropSmallBox" id="a10">D.R.S@acme.com</div></td>
</tr>
</table>
</main>
<!-- Page 5 -->
<h5 style="color: red; ">Page 5</h5>
<h2>Call Tree</h2>
<img class="callTree" src="img/call_tree.jpg">
<!-- Page 6 -->
<h5 style="color: red; ">Page 6</h5>
<h2>Emergency Phone Message</h2>
<p>We have distributed emergency call cards to staff, containing the number for an emergency phone line in a disaster. You should update this message to alert your staff members to the presence of a disastrous event, and every time there is a change in circumstances - either towards or away from resolution.<br> To update the message call the number below:</p>
<div class="dragDropSmallBox" id="a4">UPDATE EMERGENCY PHONE LINE</div><br><br>
<!-- Page 7 -->
<h5 style="color: red; ">Page 7</h5>
<h2>Network Diagram with Service Information</h2>
<main class="flex-center">
<table>
<tr>
<td><p><strong>Service</strong></p></td>
<td><p><strong>IP Address</strong></p></td>
</tr>
<tr>
<td><p>Email</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.1</div></td>
</tr>
<tr>
<td><p>Web Server</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.2</div></td>
</tr>
</tr>
<tr>
<td><p>MPLS</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.3</div></td>
</tr>
<tr>
<td><p>VoIP</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.4</div></td>
</tr>
<tr>
<td><p>SAN Server</p></td>
<td><div class="dragDropSmallBox" id="a1">192.0.0.5</div></td>
</tr>
<tr>
<td><p>CRM Server</p></td>
<td><div class="dragDropSmallBox" id="a10">192.0.0.6</div></td>
</tr>
</table>
</main>
</div>
<div id="dragContent"></div>
</div>
</div>
</div>
<div id="buttons">
<input type="button" onclick="dragDropResetForm();return false" value="Reset">
<input type="button" onclick="clearFields();" id="clear" value="Clear">
<input type="button" onclick="showResults();" id="result" value="Result">
</div>
</body>
</html>
JAVASCRIPT：
var shuffleQuestions = true;
var shuffleAnswers = false;
var lockedAfterDrag = true;
function quizIsFinished()
{
alert('Finished!');
}
var dragContentDiv = false;
var dragContent = false;
var dragSource = false;
var dragDropTimer = -1;
var destinationObjArray = new Array();
var destination = false;
var dragSourceParent = false;
var dragSourceNextSibling = false;
var answerDiv;
var questionDiv;
var sourceObjectArray = new Array();
var arrayOfEmptyBoxes = new Array();
var arrayOfAnswers = new Array();
function getTopPos(inputObj)
{
if(!inputObj || !inputObj.offsetTop)return 0;
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
if(!inputObj || !inputObj.offsetLeft)return 0;
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDragDrop(e)
{
if(document.all)e = event;
if(lockedAfterDrag && this.parentNode.parentNode.id=='questionDiv')return;
dragContentDiv.style.left = e.clientX + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) + 'px';
dragContentDiv.style.top = e.clientY + Math.max(document.documentElement.scrollTop,document.body.scrollTop) + 'px';
dragSource = this;
dragSourceParent = this.parentNode;
dragSourceNextSibling = false;
if(this.nextSibling)dragSourceNextSibling = this.nextSibling;
if(!dragSourceNextSibling.tagName)dragSourceNextSibling = dragSourceNextSibling.nextSibling;
dragDropTimer=0;
timeoutBeforeDrag();
return false;
}
function timeoutBeforeDrag(){
if(dragDropTimer>=0 && dragDropTimer<10){
dragDropTimer = dragDropTimer +1;
setTimeout('timeoutBeforeDrag()',10);
return;
}
if(dragDropTimer>=10){
dragContentDiv.style.display='block';
dragContentDiv.innerHTML = '';
dragContentDiv.appendChild(dragSource);
}
}
function dragDropMove(e)
{
if(dragDropTimer<10){
return;
}
if(document.all)e = event;
var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
dragContentDiv.style.left = e.clientX + scrollLeft + 'px';
dragContentDiv.style.top = e.clientY + scrollTop + 'px';
var dragWidth = dragSource.offsetWidth;
var dragHeight = dragSource.offsetHeight;
var objFound = false;
var mouseX = e.clientX + scrollLeft;
var mouseY = e.clientY + scrollTop;
destination = false;
for(var no=0;no<destinationObjArray.length;no++){
var left = destinationObjArray[no]['left'];
var top = destinationObjArray[no]['top'];
var width = destinationObjArray[no]['width'];
var height = destinationObjArray[no]['height'];
destinationObjArray[no]['obj'].className = 'destinationBox';
var subs = destinationObjArray[no]['obj'].getElementsByTagName('DIV');
if(!objFound && subs.length==0){
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destinationObjArray[no]['obj'].className='dragContentOver';
destination = destinationObjArray[no]['obj'];
objFound = true;
}
}
}
sourceObjectArray['obj'].className='';
if(!objFound){
var left = sourceObjectArray['left'];
var top = sourceObjectArray['top'];
var width = sourceObjectArray['width'];
var height = sourceObjectArray['height'];
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destination = sourceObjectArray['obj'];
sourceObjectArray['obj'].className='dragContentOver';
}
}
return false;
}
function dragDropEnd()
{
if(dragDropTimer<10){
dragDropTimer = -1;
return;
}
dragContentDiv.style.display='none';
sourceObjectArray['obj'].style.backgroundColor = '#FFF';
if(destination){
destination.appendChild(dragSource);
destination.className='destinationBox';
if(!destination.id || destination.id!='answerDiv'){
var previousEl = dragSource.parentNode.previousSibling;
if(!previousEl.tagName)previousEl = previousEl.previousSibling;
var numericId = previousEl.id.replace(/[^0-9]/g,'');
var numericIdSource = dragSource.id.replace(/[^0-9]/g,'');
if(numericId==numericIdSource){
dragSource.className='correctAnswer';
checkAllAnswers();
}
else
dragSource.className='wrongAnswer';
}
if(destination.id && destination.id=='answerDiv'){
dragSource.className='dragDropSmallBox';
}
} else{
if(dragSourceNextSibling)
dragSourceNextSibling.parentNode.insertBefore(dragSource,dragSourceNextSibling);
else
dragSourceParent.appendChild(dragSource);
}
if(numericId==numericIdSource) {
document.getElementById('feedback').innerHTML = "";
document.getElementById('feedback').innerHTML += 'Correct Answer!';
}
else {
document.getElementById('feedback').innerHTML = "";
document.getElementById('feedback').innerHTML += 'Incorrect Answer! Have you tried this...';
incrementScore();
}
dragDropTimer = -1;
dragSourceNextSibling = false;
dragSourceParent = false;
destination = false;
}
function checkAllAnswers()
{
for(var no=0;no<arrayOfEmptyBoxes.length;no++){
var sub = arrayOfEmptyBoxes[no].getElementsByTagName('DIV');
if(sub.length==0)return;
if(sub[0].className!='correctAnswer'){
return;
}
}
quizIsFinished();
}
function resetPositions()
{
if(dragDropTimer>=10)return;
for(var no=0;no<destinationObjArray.length;no++){
if(destinationObjArray[no]['obj']){
destinationObjArray[no]['left'] = getLeftPos(destinationObjArray[no]['obj'])
destinationObjArray[no]['top'] = getTopPos(destinationObjArray[no]['obj'])
}
}
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
}
function initDragDropScript()
{
dragContentDiv = document.getElementById('dragContent');
answerDiv = document.getElementById('answerDiv');
answerDiv.onselectstart = cancelEvent;
var divs = answerDiv.getElementsByTagName('DIV');
var answers = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dragDropSmallBox'){
divs[no].onmousedown = initDragDrop;
answers[answers.length] = divs[no];
arrayOfAnswers[arrayOfAnswers.length] = divs[no];
}
}
if(shuffleAnswers){
for(var no=0;no<(answers.length*10);no++){
var randomIndex = Math.floor(Math.random() * answers.length);
answerDiv.appendChild(answers[randomIndex]);
}
}
sourceObjectArray['obj'] = answerDiv;
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
sourceObjectArray['width'] = answerDiv.offsetWidth;
sourceObjectArray['height'] = answerDiv.offsetHeight;
questionDiv = document.getElementById('questionDiv');
questionDiv.onselectstart = cancelEvent;
var divs = questionDiv.getElementsByTagName('DIV');
var questions = new Array();
var questionsOpenBoxes = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='destinationBox'){
var index = destinationObjArray.length;
destinationObjArray[index] = new Array();
destinationObjArray[index]['obj'] = divs[no];
destinationObjArray[index]['left'] = getLeftPos(divs[no])
destinationObjArray[index]['top'] = getTopPos(divs[no])
destinationObjArray[index]['width'] = divs[no].offsetWidth;
destinationObjArray[index]['height'] = divs[no].offsetHeight;
questionsOpenBoxes[questionsOpenBoxes.length] = divs[no];
arrayOfEmptyBoxes[arrayOfEmptyBoxes.length] = divs[no];
}
if(divs[no].className=='dragDropSmallBox'){
questions[questions.length] = divs[no];
}
}
if(shuffleQuestions){
for(var no=0;no<(questions.length*10);no++){
var randomIndex = Math.floor(Math.random() * questions.length);
questionDiv.appendChild(questions[randomIndex]);
questionDiv.appendChild(questionsOpenBoxes[randomIndex]);
destinationObjArray[destinationObjArray.length] = destinationObjArray[randomIndex];
destinationObjArray.splice(randomIndex,1);
questionsOpenBoxes[questionsOpenBoxes.length] = questionsOpenBoxes[randomIndex];
questionsOpenBoxes.splice(randomIndex,1);
questions[questions.length] = questions[randomIndex];
questions.splice(randomIndex,1);
}
}
questionDiv.style.visibility = 'visible';
answerDiv.style.visibility = 'visible';
document.documentElement.onmouseup = dragDropEnd;
document.documentElement.onmousemove = dragDropMove;
setTimeout('resetPositions()',150);
window.onresize = resetPositions;
}
function incrementScore(){
counter = document.getElementById('counter');
counter.innerHTML++;
}
function showResults() {
result = document.getElementById('result');
if(counter.innerHTML < 2){
result.innerHTML += 'Well done!';
} else {
result.innerHTML += 'Not so great!';
}
}
/* Reset the form */
function dragDropResetForm()
{
for(var no = 0; no < arrayOfAnswers.length; no++){
arrayOfAnswers[no].className='dragDropSmallBox'
answerDiv.appendChild(arrayOfAnswers[no]);
}
document.getElementById('score').innerHTML = "";
}
function clearFields() {
document.getElementById("questionDiv").innerHTML = "";
}
window.onload = initDragDropScript;
3 个答案:
答案 0 :(得分：1)
我建议您使用jQueryUI draggable和droppable互动来实现您的目标。它们包含许多可以使用的方法和事件，例如，您可以使用$( ".selector" ).droppable( "disable" );轻松禁用可放置对象。您还可以省去创建拖动元素的方法的麻烦。
答案 1 :(得分：0)
我已经创建了一个非常基本的示例，可以帮助您，但可以改进：）
jsFiddle：https://jsfiddle.net/CanvasCode/hoeh0hds/1/
HTML
<input id="input1" />
<br />
<input id="input2" />
<br />
<input id="input3" />
<br />
<input id="input4" />
<br />
Javascript
document.getElementById('input2').disabled = true;
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
inputs[index].addEventListener('input', function () {
// Input 1
if (this == document.getElementById('input1')) {
if (this.value.length) {
document.getElementById('input2').disabled = false;
} else {
document.getElementById('input2').disabled = true;
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
}
}
// Input 2
if (this == document.getElementById('input2')) {
if (this.value.length) {
document.getElementById('input3').disabled = false;
} else {
document.getElementById('input3').disabled = true;
document.getElementById('input4').disabled = true;
}
}
// Input 3
if (this == document.getElementById('input3')) {
if (this.value.length) {
document.getElementById('input4').disabled = false;
} else {
document.getElementById('input4').disabled = true;
}
}
});
}
答案 2 :(得分：0)
尝试删除onmouseup和onmousedown eventlisteners，直到div准备好进行活动。下面的语法适用于
document.getElementById("myDIV").removeEventListener("mouseup", dragDropEnd)
document.getElementById("myDIV").removeEventListener("mousedown", dragDropMove)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？