TA貢獻1848條經驗 獲得超6個贊
我為你做了這件事。我希望我正確理解了任務。
抓住一個單詞，然后將其放入橙色框中。將夾子放入盒子后，您可以重新排列單詞。
您要使用的單詞必須輸入到wordsList變量中
（在代碼中，我用注釋標記了滾動到您需要的元素 ID 的行）
我希望我對你有所幫助，并且你所教的孩子們能夠享受你想要給他們帶來驚喜的東西
var wordsList = ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipisicing', 'elit', 'omnis', 'laudantium', 'illo', 'ducimus', 'ipsam', 'eaque', 'quia', 'sequi', 'dicta', 'accusamus', 'ad', 'facilis', 'nam', 'corrupti', 'reiciendis', 'labore', 'aliquam', 'Autem', 'sunt', 'consequuntur', 'officia', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipisicing', 'elit', 'omnis', 'laudantium', 'illo', 'ducimus', 'ipsam', 'eaque', 'quia', 'sequi', 'ad', 'facilis', 'nam', 'corrupti', 'reiciendis', 'labore', 'aliquam!', 'Autem', 'sunt', 'consequuntur', 'officia'];
var x = document.getElementById('words-wrap');
for (var i = 0; i < wordsList.length; i++) {
x.innerHTML += '<span class="myword" id=w' + i + ' draggable="true" ondragstart="drag(event)">' + wordsList[i] + '</span>';
}
/////////////////
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
document.location = '#stage' // <--- Scrolling to element '#stage'
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
.myword {
display: inline-block;
margin: 5px;
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#stage {
border: 10px solid orange;
min-height: 100px;
}
<div id="words-wrap">
</div>
<div id="stage" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
舉報