我正在玩HTML5拖放并在拖动时跟踪鼠标位置.
在您释放鼠标之前,OffsetX和OffsetY工作正常,在最后一次调度的拖动事件中,偏移跳转到负数
这是html:
<div id="dragger"></div>
<div id="console"></div>
Run Code Online (Sandbox Code Playgroud)
这是css:
#dragger{
-webkit-user-drag: element;
width: 100px;
height: 100px;
background: hsla(200, 100%, 50%, 0.4);
}?
Run Code Online (Sandbox Code Playgroud)
和js
$('#dragger').bind('drag', function (e) {
$('#console').html(e.originalEvent.offsetX);
})?
Run Code Online (Sandbox Code Playgroud)
你也可以在http://jsfiddle.net/Eu2mz/5/上测试一下
另外,我现在只想让它在webkit中运行.
在带有嵌套框的inline项目旁边放置一个项目会扰乱垂直对齐(它忽略顶部边距),我发现的一个解决方案是将inline-flexflex::beforeinline-flex项目中,但我不太确定为什么会修复它。
第一个忽略标签上的上边距,上边距适用于第二个,因为::before.
label {
margin: 20px 5px 0 0;
}
.input-container {
display: inline-flex;
}
.with-before::before {
content: '';
}
.buttons {
display: flex;
flex-direction: column;
}Run Code Online (Sandbox Code Playgroud)
<div>
<label>Top margin ignored:</label>
<div class="input-container">
<div class="buttons">
<button><</button>
<button>></button>
</div>
<input type="text"/>
</div>
</div>
<br/>
<div>
<label>Top margin works:</label>
<div class="input-container with-before">
<div class="buttons">
<button><</button>
<button>></button>
</div>
<input type="text"/>
</div>
</div>Run Code Online (Sandbox Code Playgroud)