个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
我使用 html5 来实现“拖放”http://www.w3schools.com/html/html5_draganddrop.asp .
但是我的可转换框比较多，不能全部显示在一个窗口的显示区域。因此，当我将一个元素拖到超出显示范围的窗口的(例如)底部可放置框时，如何使窗口自动滚动？
就像下面的网页，我想把图片拖放到底部矩形(第五个)，它超出了显示区域的范围。当我将图片拖到窗口末尾时，如何让窗口自动滚动到底部？
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1,#div2,#div3,#div4,#div5
{
width:350px;
height:200px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<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.innerHTML += data+"droppedHere"+"<br/>";
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</body>
</html>
(你可以把上面的代码复制到左边的http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop栏，然后在右边查看结果。我想在jsfiddle中展示，但不知道为什么代码在那里不起作用)
我注意到 Chrome 可以自动执行此操作，但不适用于其他浏览器，例如 safari。
我还找到了相关的解决方案，例如“滚动功能”或“检测窗口外的鼠标”。但是我无法根据他们的代码得到我想要的东西。如果有人可以提供更详细/完整的解决方案版本，我们将不胜感激。
最佳答案
我刚刚发现的是(至少在 Chrome 中)当拖动事件发生时，所有“mousemove”事件都被推迟，然后在拖放(或取消)发生后一起触发。这扼杀了一个想法，但还有其他几个想法。这是一个:在视口(viewport)底部添加一个高度为 40-50 像素的绝对定位的 div(所以它是粘性的)，然后有一个 dragenter 事件来检测鼠标位置并滚动窗口(还有一个在顶部)类(class)):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1,#div2,#div3,#div4,#div5
{
width:350px;
height:200px;
padding:10px;
border:1px solid #aaaaaa;
}
#scrollBottomDetect { position: fixed; bottom: 0; height: 40px; width: 100%; border: 1px solid red; }
#scrollTopDetect { position: fixed; top: 0; height: 40px; width: 100%; border: 1px solid red; }
</style>
<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.innerHTML += data+"droppedHere"+"<br/>";
}
function scrollPage(diff) {
window.scrollTo(window.scrollX, (window.scrollY + diff));
}
</script>
</head>
<body>
<div id="scrollTopDetect" ondragover="scrollPage(-10)"></div>
<p>Drag the W3Schools image into the rectangle:</p>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="scrollBottomDetect" ondragover="scrollPage(10)"></div>
</body>
</html>
关于javascript - 将对象(几乎)拖到窗口外时，如何使窗口自动向该方向滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12653300/
25
4
0
我正在使用 MapBox 绘制兴趣点，这些兴趣点是通过基于 Rails 构建的用户生成表单提交的。当前，用户输入一个地址，然后该地址通过 gem(地理编码器)计算出 Lat 和 Lng。从那里我通过
我正在纵向平板电脑上开发应用程序。 但是，当平板电脑转到横向模式时，应用程序也会转动，并且所有对齐方式都将被取消。那么有什么方法可以将我的 WPF 应用程序锁定到一个方向？ 谢谢! 最佳答案 我必须同
我在我的应用程序中的 mkmapview 上显示了两点之间的路线，但我想显示这两点的方向。点的纬度和经度存储在 NSArray 中。 最佳答案 这可能为时已晚，您可能已经解决了它，但这是我已经测试过并
我正在处理一个小型 Unity3D 项目，我需要从另一个工具导入一些数据。该工具通过两个向量为我提供了对象方向，我需要将其移植到 Unity。 例如，我有这两个向量； x = Vector( 0.70
有没有办法以编程方式设置 UIActionSheet 的方向？我的 iPhone 方向是纵向，但 UIActionSheet 需要是横向。这可以吗？ 编辑: 所以我的问题是我不想将 rootviewc
如何在 Python 中根据 2 个 GPS 坐标计算速度、距离和方向(度)？每个点都有纬度、经度和时间。 我在这篇文章中找到了半正矢距离计算: Calculate distance between
需要一个代码来更改 div 的属性，具体取决于 iPhone 设备的位置。在这段代码工作之前现在停止这样做了吗？ @media all and (orientation:portrait) { .
在“View Did Load”中，我试图确定 View 的大小，以便我可以适本地调整 subview 的大小。我希望它始终围绕屏幕的长度和宽度拉伸(stretch)，而不管方向如何。 quest *
如何根据对象的方向移动对象？我的意思是，我有一个处于某个位置的立方体，我想绕 Y 轴旋转并根据它们的方向移动。然后再次移动和旋转以改变方向。像这样的事情: 最佳答案 在 JS 中你可以尝试这样的事情:
我目前有一个处于横向模式的 SurfaceView。 目前我正在尝试使用添加操作栏/菜单栏 /*Action Bar */ //this.setRequestedOrientation(Activit
我正在使用 cocos2d，我想播放电影。为此，我创建了 MPMoviePlayerViewController 并将其作为 [[CCDirector sharedDirector] openGLVi
我在 cocos2d 中创建了一个游戏，因为我想使用我找到的一些 UIKit 元素 kobold2d。 我移植了游戏，但问题是我的 iPhone 刺激器旋转了， 但不是显示的节点。 必须使用: bac
我可以在 iOS 中的 UITabBarController 中更改方向吗？我有这样的东西: UITableViewController-> Team Tab -> UINavigationContr
我有 UINavigationController 和几个 View Controller 。这是他们的名单:主->相册->图片 现在，在第一个和第二个(主要和专辑)中，我希望 UINavigatio
人们普遍认为，在过去几年中，标准显示器的最佳网站宽度已从 800 像素增加到 1024+ 像素(网站通常为 960 像素宽)，但随着移动设备的兴起，哪些分辨率被认为是“关键”迎合？ 例如，this
我正在做一个 GTK+ 项目，我需要一个像这样的垂直 GtkLevelBar: 但我不知道如何从默认的水平 GtkLevelBar 翻转它: 这是我的 GtkLevelBar 代码。 GtkWidge
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我的 collectionView 以横向模式显示 20 个项目。在纵向模式下，我只想展示 8 个可重复使用的项目。我怎样才能做到这一点？ collectionView 何时在数据源上调用 colle
可以在 list 文件中设置 Activity 的方向。 但是否也可以通过代码来实现？如果是，怎么办？ 谢谢! 最佳答案 setRequestedOrientation(ActivityInfo.SC
我希望在纬度、经度和用户当前位置之间集成方向。我希望通过点击按钮将用户定向到已安装的 Google map /其他应用程序并显示方向。 我搜索了 SO 和谷歌，但找不到好的来源，因此我发布了这个问题。
我是一名优秀的程序员,十分优秀！