我有WebView
在资源文件夹中显示本地HTML页面。 WebView
是Activity
中较大布局的一部分。我正在尝试允许用户将文本从EditText
窗口小部件拖动到WebView
中的输入元素。除了将拖动侦听器接收的屏幕坐标转换为document.elementFromPoint
使用的屏幕坐标之外,一切都很好。他们不匹配。它会继续将文本放入输入框中,这些输入框比用户手指更低。任何帮助,将不胜感激。警告:我的javascript知识非常可怜。
基本流程:
在我的活动中:
private class OnWebViewDragListener implements OnDragListener {
public boolean onDrag(View v, DragEvent event) {
switch (event.getAction()) {
case DragEvent.ACTION_DROP:
String dropText = event.getClipData().getItemAt(0).getText().toString();
mJavaScript._dropText(mWebView, dropText, event.getX(), event.getY());
return true;
default:
break;
}
return false;
}
}
Javascript包装器:
public void _dropText(WebView wv, String text, float x, float y) {
wv.loadUrl("javascript:dropText('" + text + "', " + x + ", " + y + ")");
}
Javascript功能:
<script type="text/javascript">
function dropText(text, x, y) {
var elem = document.elementFromPoint(x, y);
if (elem.tagName == "INPUT") {
elem.value = text;
}
}
</script>
答案 0 :(得分:10)
想出来。是否使转换变得更加复杂。 Android的WebView和WebPage都有自己的基于可见视图端口大小的坐标系。是的,都报告不同大小的视图端口。即使两个视图端口都可以滚动,也不需要包含那些滚动的更改。简单的公式:
DE = DragEvent
WV = WebView
x = DE.getX()*(window.innerWidth / WV.getWidth());
y = DE.getY()*(window.innerHeight / WV.getHeight());
我的代码现在看起来如何:
活动:
private class OnWebViewDragListener implements OnDragListener {
public boolean onDrag(View v, DragEvent event) {
switch (event.getAction()) {
case DragEvent.ACTION_DROP:
String dropText = event.getClipData().getItemAt(0).getText().toString();
mJavaScript._dropText(mWebView, dropText, event.getX(), event.getY());
return true;
default:
break;
}
return false;
}
}
Javascript包装器:
public void _dropText(WebView wv, String text, float x, float y) {
wv.loadUrl("javascript:dropText('" + text + "', " + x + ", " + y + ", " + wv.getHeight()
+ ", " + wv.getWidth() + ")");
}
Javascript功能:
<script type="text/javascript">
function dropText(text, x, y, height, width) {
x *= (window.innerWidth / width);
y *= (window.innerHeight / height);
var elem = document.elementFromPoint(x, y);
if (elem.tagName == "INPUT") {
elem.value = text;
}
}
</script>