我正在尝试在我的Web应用程序中开发一个简单的拖放UI.可以通过鼠标或手指拖动项目,然后将其放入多个放置区域中的一个.当项目拖放到放置区域(但尚未释放)时,该区域将突出显示,标记安全着陆位置.这对鼠标事件完全没问题,但我在iPhone/iPad上遇到了touchstart/touchmove/touchend系列.
问题是当调用项目的ontouchmove事件处理程序时,它event.touches[0].target始终指向原始HTML元素(项目)而不是当前在手指下的元素.此外,当用手指在某个放置区域上拖动某个项目时,touchmove根本不会调用该放置区域自己的处理程序.这实际上意味着我无法确定手指何时位于任何放置区域之上,因此无法根据需要突出显示它们.同时,在使用鼠标时,mousedown会正确触发光标下的所有HTML元素.
有些人确认它应该像那样工作,例如http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/: 对于那些你来自的人在正常的web设计世界中,在正常的mousemove事件中,目标属性中传递的节点通常是鼠标当前所在的节点.但在所有iPhone touch事件中,目标是对原始节点的引用.
问题:有没有办法确定手指下的实际元素(不是最初触及的元素,在许多情况下可能会有所不同)？
如果我有一个不可为空的模型字段,删除它,并创建一个迁移,那么迁移将变为不可逆:
考虑以下模型:
class Foo(models.Model):
bar = models.TextField()
test = models.TextField() # This field is to go away, bye-bye!
和迁移:
# app/migrations/003_remove_foo_test.py
class Migration(migrations.Migration):
dependencies = [
('app', '0002_foo_test'),
]
operations = [
migrations.RemoveField(
model_name='foo',
name='test',
),
]
取消应用此迁移会引发异常:
$ src/manage.py migrate app 0002
Operations to perform:
Target specific migration: 0002_foo_test, from app
Running migrations:
Unapplying app.0003_remove_foo_test...Traceback (most recent call last):
...
django.db.utils.IntegrityError: column "test" contains null values
当然,这是预期的行为,它是清楚记录的,我不是在问为什么会发生这种情况:
请记住,当反转时,这实际上是在模型中添加一个字段; 如果该字段不可为空,则可能使该操作不可逆转(除了任何数据丢失,这当然是不可逆转的).
但是,我们都会犯错误,有时我们只需要以某种方式反转字段删除,即使这意味着手动为所有反转的非空字段提供临时存根值.例如,南迁移可选择允许逆转此类操作(通过询问开发人员是否为恢复的字段提供默认值,或禁止反向迁移),这似乎不是所有新奇特的Django 1.7迁移的情况. .
问题:使用Django …
官方的使用方式expo-cli是全局安装，请参阅https://docs.expo.io/get-started/installation/#installing-expo-cli：
安装 Expo CLI
Run Code Online (Sandbox Code Playgroud)# Install command line tools npm install --global expo-cli
但是，我从未找到任何关于为什么它应该是全局的解释（除了这简化了初始expo init命令）。在我看来，拥有一个全局包破坏了 npm 和本地 node_modules 背后的整个想法。本质上，expo-cli是项目的直接依赖。它用于运行开发版本expo start以及创建生产版本。
不同版本的expo-cli工作方式不同，他们甚至可能期望不同的值app.config.ts。expo-cli这意味着对一个项目进行全局升级，然后返回使用旧版本的 (global) 创建和维护的旧项目是不安全的expo-cli。
如果是像（SDK 包）expo-cli这样的普通本地项目依赖项，这一切都不会发生。expo
所以，我的问题是：保持expo-cli全球化有真正的理由吗？如果我将其移至本地项目依赖项，我会失去什么？为什么世博会文档从未提到过这样的选项？
假设我有一个简单的网格，它将项目放在 4 列中，填充整个容器宽度：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
justify-content: center;
}
.item {
height: 100px;
background-color: red;
}<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>这非常有效，直到我有 3 个或更少的项目。它们被放入相应的单元格中，但由于右侧的单元格是空的，因此在视觉上网格开始看起来“左对齐”。如果容器本身位于页面的中心，这并不酷。
当网格有 3 个或更少的项目时，如何使网格居中？我尝试使用repeat(auto-fit, 25%)但它没有考虑grid-gap到。repeat(auto-fit, minmax(25%, 1fr))拉伸内容而不是居中。
我正在努力理解如何使用 TSX 模板处理 Vue 3 中的自定义事件。
考虑一个简单的父/子应用程序，其中子级向父级发送自定义事件：
const Child = defineComponent({
emits: {
boom: (x: number) => true,
},
setup(props, { emit }) {
console.log("Child props", props)
return () => (
<div onClick={() => emit("boom", 123)}>Click me!</div>
)
},
})
const Parent = defineComponent(() => {
return () => <Child onBoom={(x) => console.log(`Boom: ${x}`)} />
})
上述功能正常，并且：
setup，props是空的（正如我所期望的）。emitchild 中的调用已正确键入（它需要传递一个数字作为参数）。不幸的是，它不知道如何输入onBoom父级：
Property 'onBoom' does not exist on type 'IntrinsicAttributes & Partial<{}> …我已经阅读了很多关于此问题的Stack Exchange问题(我认为有几十个问题); 不幸的是,它们要么是原始的,要么涵盖稍微不同的问题,要么格式错误,没有答案,要么回答不正确(尽管有些是被接受的).我将尽量保持我的示例尽可能小以说明问题.
我们来看一个最简单的例子:
<!DOCTYPE html>
<head>
<script>
var start = Date.now();
function log(s) { console.log((Date.now()-start), s); }
window.addEventListener('DOMContentLoaded', function() {log('Real DOMContentLoaded');});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
log('jQuery loaded');
$(function() { log('jQuery DOM ready'); });
$(window).load(function() { log('jQuery document loaded'); });
</script>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png">
</body>
代码按预期工作,jQuery的DOM就绪事件提前触发:
288 "jQuery loaded"
307 "jQuery DOM ready"
314 "Real DOMContentLoaded"
1376 "jQuery document loaded"
现在让我们使用require.js:
<!DOCTYPE html>
<head>
<script>
var start = Date.now();
function log(s) { console.log((Date.now()-start), s); }
window.addEventListener('DOMContentLoaded', function() …javascript ×2
css ×1
css-grid ×1
django ×1
django-1.7 ×1
django-south ×1
dom ×1
expo ×1
global ×1
jquery ×1
requirejs ×1
tsx ×1
vue.js ×1
vuejs3 ×1