小编phk*_*phk的帖子

Firefox中的可拖动按钮

是否有可能使<button>(<input type="button">)在HTML中拖放Mozilla Firefox(同时仍然可以点击)?

以下代码片段适用于谷歌浏览器,但按钮和div按钮无法拖动Mozilla Firefox(除非Alt按下按键,不知道移动设备):

document.getElementById("myDiv").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDiv")
  }
);

document.getElementById("myButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myButton")
  }
);

document.getElementById("myDivWithButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDivWithButton")
  }
);
Run Code Online (Sandbox Code Playgroud)
<div id="myDiv" draggable="true">Div</div>
<button id="myButton" draggable="true">Button</button>
<div id="myDivWithButton" draggable="true"><button>Div with Button</button></div>
Run Code Online (Sandbox Code Playgroud)

我用draggable="true"dataTransfer.setData,是不是我错过了什么?有一些明智的解决方法吗?

(如果你想知道我需要什么:我有一些东西可以拖动到某个位置或设置在默认位置[当前视图的中心],我的想法是通过按钮[d&d→选择两者]位置,单击→默认位置].我知道我想我可以尝试格式化<div>,使其看起来像一个<button>或简单地将控件分成两个元素,但我宁愿不.)

html javascript drag-and-drop cross-browser draggable

22
推荐指数
3
解决办法
1967
查看次数

识别触摸动作导致的上下文事件?

我有一个应用程序,可以拖放SVG元素内部的元素(感谢d3-dragd3-zoom,请参阅https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084作为此类页面的示例)也可以在启用触摸的设备上使用,但会发生的是,长按后会弹出一个上下文菜单(至少在IE11,Edge和Firefox中)并且挡住了,因此我想阻止上下文菜单显示在这种情况下.

我可以通过处理contextmenu事件和.preventDefault()对事件对象进行操作来禁止显示上下文菜单,但我想知道是否存在一个解决方案,其中上下文菜单只是在触摸案例中被阻止显示而且它仍然会出现在例如右边 -单击或在元素具有焦点时按下菜单键时.

我开始还以为我可以看看.button.buttons事件对象的属性,但它似乎是那些价值被任意02和它看起来像它可以任意组合在不同系统上的各种浏览器进行测试时被发现.

元素已经有了touch-action: none.

是否有一些工作方式使上下文菜单只显示长按触摸的结果?

看起来.preventDefault()相关的触摸事件不会是一种选择.

html javascript contextmenu touch dom-events

9
推荐指数
1
解决办法
603
查看次数

在Python 2中跟踪隐式unicode转换

我有一个大型项目,在各个地方有问题的隐式Unicode转换(coersions)以例如:

someDynamicStr = "bar" # could come from various sources

# works
u"foo" + someDynamicStr
u"foo{}".format(someDynamicStr)

someDynamicStr = "\xff" # uh-oh

# raises UnicodeDecodeError
u"foo" + someDynamicStr
u"foo{}".format(someDynamicStr)
Run Code Online (Sandbox Code Playgroud)

(也可能是其他形式.)

现在我想跟踪这些用法,特别是那些积极使用的代码.

如果我可以轻松地unicode用一个包装器替换构造函数会很好,它会检查输入是否为type str并且encoding/ errorsparameters设置为默认值然后通知我(打印回溯等).

/编辑:

虽然没有直接关系的东西我找我碰到了如何使解码异常干脆离开这个光荣可怕的黑客(解码一个唯一的,即strunicode,而不是周围的其他方法,请参阅https://开头的邮件. python.org/pipermail/python-list/2012-July/627506.html).

我不打算使用它,但对于那些与无效的Unicode输入和寻找快速修复(但请考虑副作用)的问题进行斗争可能会很有趣:

import codecs
codecs.register_error("strict", codecs.ignore_errors)
codecs.register_error("strict", lambda x: (u"", x.end)) # alternatively
Run Code Online (Sandbox Code Playgroud)

(互联网搜索codecs.register_error("strict"显示它显然用于某些真实项目.)

/编辑#2:

对于显式转换,我在monkeypatching的SO帖子的帮助下制作了一个片段:

class PatchedUnicode(unicode):
  def __init__(self, obj=None, encoding=None, *args, **kwargs):
    if encoding in (None, "ascii", …
Run Code Online (Sandbox Code Playgroud)

python debugging unicode monkeypatching python-2.7

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

d3调整窗口大小时的缩放行为

我使用D3设置我的图表区域,利用可缩放的行为.该图表包括x轴和y轴.

调整窗口大小时,图表区域应该是响应的.在这种情况下,我需要在窗口大小调整时重置x和y轴域和范围.

窗口调整大小时会出现问题.我注意到在以下步骤之后,变焦焦点不再与鼠标对齐:

  1. 首先平移并放大图表区域
  2. 然后调整窗口大小
  3. 然后再次平移和缩放图表区域

之后,出现了上述问题.请参阅以下具有此问题的jsfiddle.

那么处理这个问题的正确方法是什么?我注意到有关这个问题的几个讨论,例如:

d3重置范围后保留缩放/平移

我试过这种方法,但我无法使用D3 V4 API.

javascript d3.js

6
推荐指数
1
解决办法
608
查看次数

使用Selenium在Chrome中打破异常

为了调查某些Selenium测试失败,我想在运行测试时自动启用Chrome Devtools中的异常暂停功能

有一个--auto-open-devtools-for-tabs用于自动打开我已经在使用的DevTools窗格的命令行选项,但是显然我没有要使用的自动暂停功能的CLI选项/参数。

我遇到的是我尝试使用激活的Debugger.setPauseOnExceptionsChrome Devtools Protocol命令execute_cdp_cmd(我正在将Selenium用于Python):

driver.execute_cdp_cmd("Debugger.setPauseOnExceptions", {"state": "all"})
Run Code Online (Sandbox Code Playgroud)

不幸的是,即使打开了选项卡(包括DevTools窗格),我也得到了

unhandled inspector error: {"code":-32000,"message":"Debugger agent is not enabled"}
Run Code Online (Sandbox Code Playgroud)

我在做什么错或者还有其他方法(最好是可靠且可移植的方法,请不要使用任何宏东西)?

python selenium google-chrome-devtools selenium-chromedriver selenium-webdriver

6
推荐指数
1
解决办法
244
查看次数

将 YAML 多行值转换为折叠块标量样式?

使用ruamel.yaml我试图获得某种风格的 YAML,更具体地说,单行字符串:与使用折叠标量样式 ( |/ |-) 的多行字符串在同一行开始并且行被限制为一定数量的字符(换行)。

到目前为止,我的尝试深受来源中调用walk_tree类似函数的影响:

#!/usr/bin/env python

import ruamel.yaml

from ruamel.yaml.scalarstring import ScalarString, PreservedScalarString

def walk_tree(base):
    from ruamel.yaml.compat import string_types

    if isinstance(base, dict):
        for k in base:
            v = base[k]
            if isinstance(v, string_types):
                v = v.replace('\r\n', '\n').replace('\r', '\n').strip()
                base[k] = ScalarString(v) if '\n' in v else v
            else:
                walk_tree(v)
    elif isinstance(base, list):
        for idx, elem in enumerate(base):
            if isinstance(elem, string_types) and '\n' in elem:
                print(elem) # …
Run Code Online (Sandbox Code Playgroud)

python yaml ruamel.yaml

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

SVG lengthAdjust 仅用于收缩而不用于拉伸

是否有一种很好且简单的方法来使用lengthAdjust(与textLength一起)在必要时缩小文本(如果太宽)但从不尝试拉伸它?

我想到了通过 JS 生成的 SVG 的两种可能的解决方案:

  • 计算字符(或者更确切地说是字素)并基于此(连同一些启发式方法,除非使用固定宽度大小的字体)确定是否设置textLength
  • 首先不textLength设置,然后确定使用getBBox()文本是否需要一些收缩,在这种情况下textLength将设置。

恕我直言,这两种解决方案都非常丑陋(并且可能是我对过去遇到的问题的回忆getBBox())。也许我错过了一些更好的解决方案?

svg text resize

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

保持内容居中并允许在 d3 中平移/缩放

在我基于 d3.js 的项目中,即使视图的宽度或高度发生变化,我也希望保留当前视图中居中的内容以保持居中。同时我希望允许用户通过平移和缩放进行交互。

我的想法是使用嵌套组,外部组作为居中,内部组作为目标d3.zoom

<g transform="translate(WIDTH/2, HEIGHT/2)">
  <g transform="translate(ZOOM_X, ZOOM_Y) scale(ZOOM_K)">

    ...

  </g>
</g>
Run Code Online (Sandbox Code Playgroud)

请参阅以下尝试:

var svgWrapper = d3.select("#svgWrapper").node(),
  svg = d3.select("svg"),
  width = svgWrapper.offsetWidth,
  height = svgWrapper.offsetHeight;

var outerG = svg.append("g");
var g = outerG.append("g");

outerG.append("line")
  .attr("stroke", "red")
  .attr("stroke-width", 2)
  .attr("x1", -10)
  .attr("x2", 10)
  .attr("y1", -10)
  .attr("y2", 10);

outerG.append("line")
  .attr("stroke", "red")
  .attr("stroke-width", 2)
  .attr("x1", -10)
  .attr("x2", 10)
  .attr("y1", 10)
  .attr("y2", -10);

for (var i = 1; i <= 3; ++i) {
  g.append("circle")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", …
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

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

使用单个替换操作将所有前导选项卡替换为空格

在我的文本中,我想用两个空格替换所有前导选项卡,但只留下非前导选项卡.

例如:

a
\tb
\t\tc
\td\te
f\t\tg
Run Code Online (Sandbox Code Playgroud)

("a\n\tb\n\t\tc\n\td\te\nf\t\tg")

应该变成:

a
  b
    c
  d\te
f\t\tg
Run Code Online (Sandbox Code Playgroud)

("a\n b\n c\n d\te\nf\t\tg")

对于我的情况,我可以通过多次替换操作来执行此操作,重复与许多最大嵌套级别一样多次,或者直到没有任何更改.

但是,一次运行也不可能吗?

我尝试了但是没有设法提出一些东西,我提出的最好的东西是外观:

re.sub(r'(^|(?<=\t))\t', '  ', a, flags=re.MULTILINE)
Run Code Online (Sandbox Code Playgroud)

哪个"仅"使一个错误的替换(第二个选项卡在f和之间g).

现在可能是因为已经更换的部件无法再次匹配(或者更换不会立即发生),因此在单次运行中完全无法进行正则表达式,并且您无法对"计数"进行排序正则表达式,在这种情况下,我希望看到一些更详细的解释原因(只要这不会过多地转移到[cs.se]领域).

我目前正在使用Python,但这可以应用于几乎任何类似的正则表达式实现.

python regex

4
推荐指数
1
解决办法
156
查看次数

仅列出需求文件中提到的过时的 pip 包

我可以pip list -o用来获取过时软件包的列表,但我只想获取特定需求文件中列出的过时软件包列表。基本上相当于pip freeze -r requirements.txt过时的包。

我可以使用,--not-required但这仍会列出已安装但未在需求文件中列出的已安装软件包。

python pip requirements.txt

3
推荐指数
1
解决办法
724
查看次数

SVG在某些情况下会在Safari中过滤模糊

我有一个带有交互式SVG的页面,除了Safari之外,该页面在所有浏览器(Firefox,Chrome甚至IE / Edge)上都不错,而受SVG过滤器之一影响的所有内容都变成模糊糊糊(看起来像是呈现到低分辨率的东西)使用双线性插值放大的画布)。

现在在这里出现问题的一个小测试案例:

<svg>
  <defs>
    <filter id="filter" y="-100" x="-100" height="300" width="300">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3.5"></feGaussianBlur>
      <feColorMatrix type="matrix" values="0 0 0 2 0   0 0 0 2 0   0 0 0 0 0   0 0 0 1 0" result="lightenedBlur"></feColorMatrix>
      <feMerge>
        <feMergeNode in="lightenedBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <g>
    <rect x="10" y="10" width="100" height="100" fill="blue" filter="url(#filter)"></rect>
  </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

在Apple Safari 11(在OS X 10.13上)上的外观:
Apple Safari 11(在OS X 10.13上)显示SVG筛选器问题

分别与Google Chrome和Mozilla Firefox进行比较:
谷歌浏览器未显示SVG过滤器问题 Mozilla Firefox不显示SVG过滤器问题

网上查看其他SVG过滤器演示页面时,虽然效果显然不存在。不太清楚是什么原因造成的。我注意到的是,过滤器面积越大(通过的width/ height属性控制),问题就会变得更加明显<filter>

这是一个已知的问题?在什么情况下会发生?什么是合理的解决方法?

safari svg mobile-safari d3.js svg-filters

2
推荐指数
1
解决办法
372
查看次数