小编Gar*_*ite的帖子

HTML5 Drag Release offsetX offsetY jump

我正在玩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中运行.

javascript html5 drag-and-drop

8
推荐指数
1
解决办法
2564
查看次数

Inline-Flex 与垂直对齐相混淆

在带有嵌套框的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>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text"/>
  </div>
</div>
<br/>
<div>
  <label>Top margin works:</label>
  <div class="input-container with-before">
    <div class="buttons">
      <button>&lt;</button>
      <button>&gt;</button>
    </div>
    <input type="text"/>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css vertical-alignment flexbox

5
推荐指数
1
解决办法
3557
查看次数