向下/向上拖動可拖動專案時頁面不會垂直滾動-有解無憂

我有一個拖放測驗，用戶可以在其中單擊一個術語并將其拖動到陳述句串列中的正確空白處。

但是，當可拖動的術語和段落不在視口中并且您需要滾動時，這適用于較長的頁面，當您將術語拖動到頁面的底部邊緣時，頁面不會移動。我已經從父元素中洗掉了很多，overflow: hidden但是我仍然遇到這個問題。

任何人都可以解釋為什么并希望提供一個解決方案，以便在較短的視口上可以訪問內容，同時拖動？如果您使用箭頭鍵進行拖動，我注意到頁面確實會移動，所以我認為這不是overflow問題嗎？

添加了要發布的代碼，但如果更易于查看，也可以在 CodePen 上使用：https ://codepen.io/moy/pen/gOzWBmJ

/**
 * Fix for iOS bug with scroll height when using 100vh/fixed elements.
 */
 
const documentHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--doc-height', '${window.innerHeight}px')
}
window.addEventListener('resize', documentHeight)
documentHeight()




/**
 * jQUery UI tabs
 */

$(function() {
    $('#tabs').tabs();
});




/*------------------------------------*\
    #QUIZZES
\*------------------------------------*/

/**
 * Drag & Drop Quiz.
 *
 * 1. Make words draggable with revert = true.
 */
 
$(document).ready(function() {
    score = 0;
    if ($('.draggable')[0]) {
        $('.draggable').draggable({
            revert: true /* [1] */,
            snapTolerance: 30,
            revertDuration: 0,
            cursor: 'move',
            create: function(event, ui) {
                $(event.target).css('width', Math.ceil($(event.target).width())   1   'px');
            },
            zIndex: 100,
        });
    }
});

/**
 * Make blank spaces accept corresponding word.
 */

$('.blank').each(function(index) {
    toAccept = $(this)[0].getAttribute('data-accept'); //Compatible for lower IE
    // Resize spans to correct answer
    if ($(this).hasClass('resizable')) {
        answer = $('.draggable.'   toAccept);
        width = answer[0].scrollWidth;
        width =
            width -
            $(this)
                .css('padding-left')
                .replace('px', '') *
                2;
        $(this).css('width', width);
    }

    $(this).droppable({
        accept: '.'   toAccept,
        drop: function(event, ui) {
            $(this).append(ui.draggable);
            $(this).addClass('answered');

            score  ;
            $(ui.draggable).draggable('destroy');
            $(this).droppable('destroy');
        },
    });
});

/**
 * Multiple Choice Quiz (radio button based).
 */

function checkMultiChoiceAnswer() {
    score = 0;
    qs = 0;
    $('input[value="true"]').each(function() {
        qs  ;
    });
    $('input').each(function(ind, ele, arr) {
        if (ele.value == 'true' && ele.checked === true) {
            score  ;
        }
    });
    // console.log(score);
    $('.quiz__correct').text(score.toString());
    $('.quiz__total').text(qs.toString());
}

function multiReset() {
    qs = 0;
    $('.checked').each(function(ind, ele, arr) {
        $(ele).removeClass('checked');
    });
    $('input').each(function(ind, ele, arr) {
        ele.checked = false;
    });
    $('input[value="true"]').each(function() {
        qs  ;
    });
    $('.quiz__total').text(qs);
    $('.quiz__correct').text('0');
}

/**
 * Data Entry Quiz (input based).
 */

function checkAnswersCashFlow() {
    score = 0;
    $('.answerable').each(function(index, element, array) {
        givenAns = $(element)[0].value.replace('/[^0-9]/g', '');
        givenAns = givenAns.toLowerCase();

        ans = $(element)[0]
            .getAttribute('data-accept')
            .replace('/[^0-9]/g', '');
        if (givenAns == ans) {
            score  ;
        }
        $('.quiz__correct').text(score);
    });
}

function tableReset() {
    $('.quiz__correct').text('0');
    $('.answerable').val('');
}

/**
 * Sets Quiz score to 0/X on page load and on reset. This works on the "Multiple
 * Choice Quiz" and also the "Data Entry Quiz".
 */

window.onload = function() {
    if (typeof $('.quiz__total')[0] != 'undefined') {
        qs = 0;
        $('input[value="true"]').each(function() {
            qs  ;
        });
        $('.quiz__total').text(qs);
    }
    if (typeof $('.answerable')[0] != 'undefined') {
        total = 0;
        $('.answerable').each(function(ind, ele, arr) {
            total  ;
        });
        $('.quiz__total').text(total);
    }
};

/* Base */
html {
  background: white;
  font-size: 62.5%;
  height: 100%;
  height: var(--doc-height);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f7f7f7;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: skyblue;
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  min-height: 100%;
  min-height: var(--doc-height);
  letter-spacing: 1px;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* Page Layout */
.page {
  padding: 72px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-head {
  background-color: white;
  box-shadow: inset 0 -4px 0 #f7f7f7, 0 4px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 72px;
  padding: 0 12px;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.page-foot {
  background-color: white;
  box-sizing: border-box;
  box-shadow: inset 0 4px 0 #f7f7f7, 0 -4px 0 rgba(0, 0, 0, 0.08);
  height: 72px;
  padding: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

/* Main Container */
.main {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 0 0;
  position: relative;
  width: 100%;
  max-width: 1024px;
  z-index: 10;
}
.main:before, .main:after {
  content: "";
  display: flex;
  flex-shrink: 0;
  position: sticky;
  background: red;
  background-size: 100%;
  height: 370px;
  top: 64px;
  margin-left: -112px;
  width: 112px;
}
.main:after {
  margin-left: auto;
  margin-right: -112px;
}

.main__inner {
  box-sizing: border-box;
  display: block;
  padding: 0 12px;
  width: 100%;
}

/* Content Group */
.wrap {
  background: white;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 12px;
  margin: 0 auto 24px;
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Boxout */
.boxout {
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 24px 24px 0;
  position: relative;
}

/* Quiz */
.missing-words {
  position: relative;
}

.missing-words__answers {
  background: white;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 24px 24px 12px;
  transform: translateZ(0);
}

.missing-words__answers-item {
  background: none;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  margin: 0 4px 8px 0;
  padding: 0;
  transition: 0.24s ease-in;
  vertical-align: top;
}

.missing-words__draggable {
  background: skyblue;
  border-radius: 24px;
  color: black;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
}

.missing-word__list {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
}

.missing-words__list li {
  background: white;
  margin-bottom: 2px;
  padding: 24px 24px 15px;
}

.missing-words__blank {
  background: #f7f7f7;
  outline: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 #f7f7f7;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  letter-spacing: 1px;
  margin: 8px 2px !important;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 4px);
}

/* Table */
.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

tbody th,
tbody td {
  background: #f7f7f7;
}

/* Tabs */
.ui-tabs {
  margin: 0 0var --spacing-24;
  position: relative;
  text-shadow: none;
  width: 100%;
  overflow: hidden;
}

.ui-tabs-nav {
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.ui-tabs-nav li {
  background: none;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  position: relative;
  width: auto;
}

.ui-tabs-nav a {
  background: skyblue;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 12px;
  transition: none;
  min-width: 48px;
}

.ui-tabs-nav .ui-state-active a {
  background: #f7f7f7;
}

.ui-tabs-panel {
  background: #f7f7f7;
  border-radius: 0 0 12px 12px;
  clear: both;
  display: block;
  margin: 0 0 24px;
  padding: 24px 24px 0;
  position: relative;
}

<div class="page">
  <div class="page-head">Fixed Header</div>
  <div class="main">
    <div class="main__inner">
      <div class="wrap">

        <div class="boxout">
            <h2>Quiz</h2>
          <p>Drag the correct words from the list below to complete the following sentences:</p>
          <div class="missing-words">
            <ul class="missing-words__answers">
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-1">Closed</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-2">Characteristics</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-3">Loyalty</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-4">Observations</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-5">Sales</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-6">Primary</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-7">Profiles</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-8">Competitors</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-9">Quantitative</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-10">Same</span></li>
            </ul>
            <ul class="missing-words__list">
              <li>In order to understand target customers, a business may create customer <span class="missing-words__blank blank resizable" data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span class="missing-words__blank blank resizable" data-accept="word-2"></span> .</li>
              <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span class="missing-words__blank blank resizable" data-accept="word-5"></span> . Targeting customers effectively also helps a business to build customer <span class="missing-words__blank blank resizable" data-accept="word-3"></span> .</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-8"></span> are other businesses that offer the <span class="missing-words__blank blank resizable" data-accept="word-10"></span> or similar products/services.</li>
              <li>Questionnaires, focus groups and <span class="missing-words__blank blank resizable" data-accept="word-4"></span> are all examples of <span class="missing-words__blank blank resizable" data-accept="word-6"></span> research methods.</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-9"></span> data relates to amounts or quantities and can be easily counted and measured. It can be collected through the use of <span class="missing-words__blank blank resizable" data-accept="word-1"></span> questions.</li>
            </ul>
          </div>
        </div>

        <div class="table-overflow">
          <table class="table-solid">
            <thead>
              <tr>
                <th style="width: 33.33333%;">&nbsp;</th>
                <th style="width: 33.33333%;">Primary research</th>
                <th style="width: 33.33333%;">Secondary research</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Definition:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
              <tr>
                <th>Examples:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
            </tbody>
          </table>
          <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
              <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li>
            </ul>
            <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
              <h2>Ikea</h2>
              <p>Ikea’s mission statement is:</p>
              <blockquote>
                <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
              </blockquote>
            </div>
            <div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Nike</h2>
              <p>Nike’s mission statement is:</p>
              <blockquote>
                <p>To bring inspiration and innovation to every athlete in the world – if you have a body, you are an athlete.</p>
              </blockquote>
            </div>
            <div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Microsoft</h2>
              <p>Microsoft’s mission statement is:</p>
              <blockquote>
                <p>To empower every person and every organisation on the planet to achieve more.</p>
              </blockquote>
            </div>
            <div id="tab-4" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Tesla</h2>
              <p>Tesla’s mission statement is:</p>
              <blockquote>
                <p>To accelerate the world’s transition to sustainable energy.</p>
              </blockquote>
            </div>
            <div id="tab-5" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Starbucks</h2>
              <p>Starbucks’ mission statement is:</p>
              <blockquote>
                <p>To inspire and nurture the human spirit – one person, one cup and one neighbourhood at a time.</p>
              </blockquote>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="page-foot">Fixed Footer</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

uj5u.com熱心網友回復：

您將需要使用helper和appendTo選項。這將在此處進行更多討論。

這是一個例子。

/**
 * Fix for iOS bug with scroll height when using 100vh/fixed elements.
 */

const documentHeight = () => {
  const doc = document.documentElement
  doc.style.setProperty('--doc-height', '${window.innerHeight}px')
}
window.addEventListener('resize', documentHeight);
documentHeight();


$(function() {
  $('#tabs').tabs();

  var score = 0;
  if ($('.draggable').length) {
    $('.draggable').draggable({
      containment: ".wrap",
      appendTo: ".wrap",
      helper: "clone",
      revert: true,
      snapTolerance: 30,
      revertDuration: 0,
      cursor: 'move',
      create: function(event, ui) {
        $(event.target).css('width', Math.ceil($(event.target).width())   1   'px');
      },
      start: function(e, ui) {
        $(this).css("visibility", "hidden");
      },
      stop: function(e, ui) {
        $(this).css("visibility", "visible");
      },
      zIndex: 1000
    });
  }

  $('.blank').each(function(index) {
    toAccept = $(this)[0].getAttribute('data-accept'); //Compatible for lower IE
    // Resize spans to correct answer
    if ($(this).hasClass('resizable')) {
      answer = $('.draggable.'   toAccept);
      width = answer[0].scrollWidth;
      width =
        width -
        $(this)
        .css('padding-left')
        .replace('px', '') *
        2;
      $(this).css('width', width);
    }

    $(this).droppable({
      accept: '.'   toAccept,
      drop: function(event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css("visibility", "visible");
        $(this).addClass('answered');
        score  ;
        $(ui.draggable).draggable('destroy');
        $(this).droppable('destroy');
      },
    });
  });

  function checkMultiChoiceAnswer() {
    score = 0;
    qs = 0;
    $('input[value="true"]').each(function() {
      qs  ;
    });
    $('input').each(function(ind, ele, arr) {
      if (ele.value == 'true' && ele.checked === true) {
        score  ;
      }
    });
    // console.log(score);
    $('.quiz__correct').text(score.toString());
    $('.quiz__total').text(qs.toString());
  }

  function multiReset() {
    qs = 0;
    $('.checked').each(function(ind, ele, arr) {
      $(ele).removeClass('checked');
    });
    $('input').each(function(ind, ele, arr) {
      ele.checked = false;
    });
    $('input[value="true"]').each(function() {
      qs  ;
    });
    $('.quiz__total').text(qs);
    $('.quiz__correct').text('0');
  }

  /**
   * Data Entry Quiz (input based).
   */

  function checkAnswersCashFlow() {
    score = 0;
    $('.answerable').each(function(index, element, array) {
      givenAns = $(element)[0].value.replace('/[^0-9]/g', '');
      givenAns = givenAns.toLowerCase();

      ans = $(element)[0]
        .getAttribute('data-accept')
        .replace('/[^0-9]/g', '');
      if (givenAns == ans) {
        score  ;
      }
      $('.quiz__correct').text(score);
    });
  }

  function tableReset() {
    $('.quiz__correct').text('0');
    $('.answerable').val('');
  }

  /**
   * Sets Quiz score to 0/X on page load and on reset. This works on the "Multiple
   * Choice Quiz" and also the "Data Entry Quiz".
   */

  window.onload = function() {
    if (typeof $('.quiz__total')[0] != 'undefined') {
      qs = 0;
      $('input[value="true"]').each(function() {
        qs  ;
      });
      $('.quiz__total').text(qs);
    }
    if (typeof $('.answerable')[0] != 'undefined') {
      total = 0;
      $('.answerable').each(function(ind, ele, arr) {
        total  ;
      });
      $('.quiz__total').text(total);
    }
  };
});

/* Base */

html {
  background: white;
  font-size: 62.5%;
  height: 100%;
  height: var(--doc-height);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f7f7f7;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: skyblue;
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  min-height: 100%;
  min-height: var(--doc-height);
  letter-spacing: 1px;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 24px;
  padding: 0;
}


/* Page Layout */

.page {
  padding: 72px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-head {
  background-color: white;
  box-shadow: inset 0 -4px 0 #f7f7f7, 0 4px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 72px;
  padding: 0 12px;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.page-foot {
  background-color: white;
  box-sizing: border-box;
  box-shadow: inset 0 4px 0 #f7f7f7, 0 -4px 0 rgba(0, 0, 0, 0.08);
  height: 72px;
  padding: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}


/* Main Container */

.main {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 0 0;
  position: relative;
  width: 100%;
  max-width: 1024px;
  z-index: 10;
}

.main:before,
.main:after {
  content: "";
  display: flex;
  flex-shrink: 0;
  position: sticky;
  background: red;
  background-size: 100%;
  height: 370px;
  top: 64px;
  margin-left: -112px;
  width: 112px;
}

.main:after {
  margin-left: auto;
  margin-right: -112px;
}

.main__inner {
  box-sizing: border-box;
  display: block;
  padding: 0 12px;
  width: 100%;
}


/* Content Group */

.wrap {
  background: white;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 12px;
  margin: 0 auto 24px;
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}


/* Boxout */

.boxout {
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 24px 24px 0;
  position: relative;
}


/* Quiz */

.missing-words {
  position: relative;
}

.missing-words__answers {
  background: white;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 24px 24px 12px;
  transform: translateZ(0);
}

.missing-words__answers-item {
  background: none;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  margin: 0 4px 8px 0;
  padding: 0;
  transition: 0.24s ease-in;
  vertical-align: top;
}

.missing-words__draggable {
  background: skyblue;
  border-radius: 24px;
  color: black;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
}

.missing-word__list {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
}

.missing-words__list li {
  background: white;
  margin-bottom: 2px;
  padding: 24px 24px 15px;
}

.missing-words__blank {
  background: #f7f7f7;
  outline: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 #f7f7f7;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  letter-spacing: 1px;
  margin: 8px 2px !important;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 4px);
}


/* Table */

.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

tbody th,
tbody td {
  background: #f7f7f7;
}


/* Tabs */

.ui-tabs {
  margin: 0 0var --spacing-24;
  position: relative;
  text-shadow: none;
  width: 100%;
  overflow: hidden;
}

.ui-tabs-nav {
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.ui-tabs-nav li {
  background: none;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  position: relative;
  width: auto;
}

.ui-tabs-nav a {
  background: skyblue;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 12px;
  transition: none;
  min-width: 48px;
}

.ui-tabs-nav .ui-state-active a {
  background: #f7f7f7;
}

.ui-tabs-panel {
  background: #f7f7f7;
  border-radius: 0 0 12px 12px;
  clear: both;
  display: block;
  margin: 0 0 24px;
  padding: 24px 24px 0;
  position: relative;
}

<div class="page">
  <div class="page-head">Fixed Header</div>
  <div class="main">
    <div class="main__inner">
      <div class="wrap">
        <div class="boxout">
          <h2>Quiz</h2>
          <p>Drag the correct words from the list below to complete the following sentences:</p>
          <div class="missing-words">
            <ul class="missing-words__answers">
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-1">Closed</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-2">Characteristics</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-3">Loyalty</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-4">Observations</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-5">Sales</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-6">Primary</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-7">Profiles</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-8">Competitors</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-9">Quantitative</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-10">Same</span></li>
            </ul>
            <ul class="missing-words__list">
              <li>In order to understand target customers, a business may create customer <span class="missing-words__blank blank resizable" data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span class="missing-words__blank blank resizable"
                  data-accept="word-2"></span> .</li>
              <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span class="missing-words__blank blank resizable" data-accept="word-5"></span> . Targeting customers effectively also helps a business to
                build customer <span class="missing-words__blank blank resizable" data-accept="word-3"></span> .</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-8"></span> are other businesses that offer the <span class="missing-words__blank blank resizable" data-accept="word-10"></span> or similar products/services.</li>
              <li>Questionnaires, focus groups and <span class="missing-words__blank blank resizable" data-accept="word-4"></span> are all examples of <span class="missing-words__blank blank resizable" data-accept="word-6"></span> research methods.</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-9"></span> data relates to amounts or quantities and can be easily counted and measured. It can be collected through the use of <span class="missing-words__blank blank resizable"
                  data-accept="word-1"></span> questions.</li>
            </ul>
          </div>
        </div>
        <div class="table-overflow">
          <table class="table-solid">
            <thead>
              <tr>
                <th style="width: 33.33333%;">&nbsp;</th>
                <th style="width: 33.33333%;">Primary research</th>
                <th style="width: 33.33333%;">Secondary research</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Definition:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
              <tr>
                <th>Examples:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
            </tbody>
          </table>
          <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
              <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li>
            </ul>
            <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
              <h2>Ikea</h2>
              <p>Ikea’s mission statement is:</p>
              <blockquote>
                <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
              </blockquote>
            </div>
            <div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Nike</h2>
              <p>Nike’s mission statement is:</p>
              <blockquote>
                <p>To bring inspiration and innovation to every athlete in the world – if you have a body, you are an athlete.</p>
              </blockquote>
            </div>
            <div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Microsoft</h2>
              <p>Microsoft’s mission statement is:</p>
              <blockquote>
                <p>To empower every person and every organisation on the planet to achieve more.</p>
              </blockquote>
            </div>
            <div id="tab-4" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Tesla</h2>
              <p>Tesla’s mission statement is:</p>
              <blockquote>
                <p>To accelerate the world’s transition to sustainable energy.</p>
              </blockquote>
            </div>
            <div id="tab-5" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Starbucks</h2>
              <p>Starbucks’ mission statement is:</p>
              <blockquote>
                <p>To inspire and nurture the human spirit – one person, one cup and one neighbourhood at a time.</p>
              </blockquote>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="page-foot">Fixed Footer</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

為了保留相同的 UI 互動，我們可以使原始的不可見 (visibility: hidden;如果用戶選擇了錯誤的答案，則保留適當的阻止和“還原”。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511221.html

標籤：javascripthtmljQuerycssjQuery-ui

上一篇：jquerysortable,connectWith,查找接收容器

下一篇：為什么ajax中的按鈕導致JQueryUI對話框在單擊時不會觸發？