javascript - 如何在javascript中拖动时更改自动滚动“开始区域”?
问题描述
我为我的学生做了一个项目,他们必须将单词拖放到正确的框中。不幸的是,有很多问题,所以学生需要滚动才能访问底部的问题。我的问题如下:将鼠标拖动到页面底部以滚动的任务确实不是最佳的。页面开始滚动的区域非常小,所以我想办法让它变大(或者当拖动到页面的 2/3 时触发滚动)。
我不是很擅长 javascript 和 css,所以请帮助我。
解决方案
我为你做了这个。我希望我正确理解了这项任务。
抓住一个词,然后把它放在橙色的盒子里。将夹子放入盒子后,您可以重新排列单词。
您要使用的单词必须在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>
推荐阅读
- laravel - 我想重新加载我的侧边栏组件(vue js + laravel)
- bash - 我的 .sh 将配置值视为命令
- docker - 如何将服务名称解析为超级账本作曲家的 docker swarm 模式?
- web-testing - Visual Studio-Web 测试失败并显示消息“在测试上下文中找不到上下文参数'$HIDDEN1.NAP'”并且 Web 测试重定向到登录页面
- python - 如何在python中将列表数据转换为格式化的json
- linux - 无法通过 ssh 的函数调用访问局部变量
- javafx - javafx中的圆形控制
- java - 为 Number 子类生成布尔检查
- python - Python COMError: (-2147024894, 'Das System kann die angegebene Datei nicht finden.', (None, None, None, 0, None))
- android - 适配器之间的 Notifydatasetchanged()