所以,我有一个令人满意的div - 我正在制作一个WYSIWYG编辑器:粗体,斜体,格式化,无论如何,最近:插入花哨的图像(在一个花哨的盒子里,带有标题).
<a class="fancy" href="i.jpg" target="_blank">
<img alt="" src="i.jpg" />
Optional Caption goes Here!
</a>
用户使用我给他们提供的对话框添加这些奇特的图像:他们填写详细信息,上传图像,然后很像其他编辑器功能,我用document.execCommand('insertHTML',false,fancy_image_html);它来根据用户的选择进行填充.
所以,现在我的用户可以拍摄一个奇特的图像 - 他们需要能够移动它.用户需要能够单击并拖动图像(花式框和所有图像),以便将其放置在满足其中的任何位置.他们需要能够在段落之间移动,甚至在段落之间 - 如果他们想要的话,在两个单词之间移动它.
请记住 - 在一个可信的,简单的旧<img>标签已经被用户代理祝福,具有这种可爱的拖放功能.默认情况下,您可以将<img>标签拖放到任何地方; 默认的拖放操作就像人们梦寐以求的那样.
所以,考虑一下这种默认行为如何对我们的<img>伙伴们如此有用- 我只想稍微扩展这种行为以包含更多的HTML - 这似乎应该是容易实现的.
首先,我<a>使用draggable属性设置我的花哨标签,并禁用contenteditable(不确定是否有必要,但似乎它可能也是关闭):
<a class="fancy" [...] draggable="true" contenteditable="false">
然后,因为用户仍然可以将图像拖出花哨的<a>盒子,我不得不做一些CSS.我在Chrome上工作,所以我只向你展示-webkit-前缀,尽管我也使用了其他的.
.fancy {
-webkit-user-select:none;
-webkit-user-drag:element; }
.fancy>img {
-webkit-user-drag:none; }
现在,用户可以拖动整个花哨的盒子,并且稍微部分褪色的点击拖动表示图像反映了这一点 - 我可以看到我现在正在拿起整个盒子:)
我已经尝试了几种不同CSS属性的组合,上面的组合似乎对我有意义,并且似乎效果最好.
我希望只有这个CSS就足以让浏览器使用整个元素作为可拖动的项目,自动向用户授予我一直梦寐以求的功能...... 然而,它似乎比这更复杂.
这种拖放似乎比它需要的更复杂.
所以,我开始深入研究DnD api文档,现在我被卡住了.所以,这就是我所操作的(是的,jQuery):
$('.fancy')
.bind('dragstart',function(event){
//console.log('dragstart');
var dt=event.originalEvent.dataTransfer;
dt.effectAllowed …我已经看过很多像这样的东西了,我正在寻找基本的JavaScript继承的正确解决方案:
function Food(){} // Food constructor (class)
function Bread(){} // Bread constructor (class)
var basicFood = new Food(); // Food classes will inherit from this basicFood instance.
Bread.prototype = basicFood; // Bread now inherits from Food.
var bread = new Bread(); // We create some bread!
bread.constructor == Food; // Though, now we feel very uneasy about how
// the constructor is wrong,
Bread.prototype.constructor = Bread; // So we explicitly set the prototype's constructor
bread = new Bread(); // and …我有一个重命名许多文件的分支,我正在尝试将其重新定位到master原始文件被修改的位置(最好不要将其转换为手动解决冲突的噩梦).
我一直在我的本地typescript分支中将一个JavaScript项目移植到TypeScript ..js现在所有文件都已成为.ts文件,并且某些语法已升级.
同时,分支.js上发生了对原始文件的更改master.
我想将我的分支重新绑定 - 但是更改没有正确合并,因为文件重命名尚未被检测到 - 所以我们遇到了冲突,其中git认为已经删除的文件发生了变化(但是他们有实际上已重命名为文件).typescriptmaster.js.ts
Git图:
o-[typescript] .js files become .ts
|
| o-[master] changes to the .js files
| |
| o
|/
o-[root] common ancestor
所以,站在root分公司时:
我可以运行此命令来查看所有重命名: git diff --name-status --find-renames=10% typescript
我知道git merge命令具有相同的--find-renames功能,但是我很难让它工作.
git merge -X find-renames=10% mybranch似乎是预期的语法.我理解git rebase 可能支持find-renames功能,但我还不清楚如何使用它.
我是一名Web开发人员/设计师,我需要我的代码 - 文盲客户端能够轻松搞乱特定元素的颜色,保存这些CSS更改,并将它们发送给我.我将通过电话指导他们,但我仍然需要它比预期他们在主题表中找到CSS选择器,并编写十六进制代码更容易.
我需要一个浏览器内检查器,它允许代码文盲的人:
我发现这个难题的存在非常令人困惑 - 为什么浏览器厂商难以制作如此丰富的网页编辑套件,可以操纵CSS,但不包括基本的"保存更改"功能？ 我错过了什么吗？
我在Chrome中发现,可以使用检查器自由操作元素的CSS,然后单击与每个规则关联的CSS工作表(在规则的右上角),以转到已修改的CSS工作表中.来源标签.这就是我想要保存的.
从这里,可以右键单击此修改后的源代码中的任意位置,然后单击"另存为" - 但不幸的是,奇怪的是, Chrome会保存错误的源代码.它保存了原始的,未经修改的源代码 - 而不是您右键单击"保存"的已修改源代码.非常令人沮丧,我正在试图找到解决这个bug的方法.我太近了!
好的,我已经明白了.当您保存在Chrome的源标签的文件时,你不只是保存该文件- 你实际上设置Chrome浏览器不断地自动保存该文件在每次改变你做它.
这实际上很酷,但非常误导.
因此,在保存CSS文件后,您在检查器中对元素的CSS所做的每个更改都将自动保存到该文件.即使您重新启动浏览器,这仍然存在.
出现了混乱,因为当你有一个标记为自动保存的文件,然后你保存为一个修改过的文件时, Chrome奇怪地写了原始文件,而不是你右键单击的文件.只要您在此之后进行任何更改,Chrome就会自动将每个当前修改都写入该文件.我认为这是Chrome中的一个错误.
经验教训, 首先,保存 - 作为文件.其次,做出改变.
Presto,你修改过的CSS主题在你的硬盘上等着你.
要清楚,如果您保存,然后进行更改,然后再次保存 - Chrome将保存原始来源,而不是您的修改来源.这使事情的顺序变得重要.
我不知道如何查看当前标记为自动保存的文件列表,或者如何取消标记它们.
我熟悉--inspect自节点7以来使用该选项.现在在节点8上,它只是不起作用.今天我像往常一样要求节点使用检查器:
$ node --inspect --debug-brk node_modules/mocha/bin/_mocha o/**/*.test.js
它回应如下:
Debugger listening on ws://127.0.0.1:9229/97a6264d-a751-4467-ac36-172ff3ebaac1
For help see https://nodejs.org/en/docs/inspector
如果我尝试打开该链接,Chrome会说:
This site can’t be reached
The webpage at ws://127.0.0.1:9229/97a6264d-a751-4467-ac36-172ff3ebaac1 might be temporarily down or it may have moved permanently to a new web address.
ERR_DISALLOWED_URL_SCHEME
之前它曾经是一个"chrome-devtools://"链接,它的工作非常出色.
是什么赋予了？
搜索周围,我找不到任何我应该用这个ws://链接.
我在许多测试套件中,在许多测试文件中进行了许多测试
我需要隔离和调试单个测试
我正在调试通过node --inspect-brk ./node_modules/jest/bin/jest,所以其他涉及监视模式的解决方案太复杂了
我怎么能跳过所有测试,除了我需要调试的那个？
为什么在以下情况下koa-static无法使用koa-router？
const Koa = require("koa")
const serve = require("koa-static")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()
// fails with 404... why?
router.use(serve("public"))
// // this, on the other hand, works
// app.use(serve("public"))
app.use(router.middleware())
app.listen(8080)
// browse to "http://localhost:8080/testfile.txt"
if (typeof Object.create != 'function') {
(function () {
var F = function () {};
Object.create = function (o) {
if (arguments.length > 1) { throw Error('Second argument not supported');}
if (o === null) { throw Error('Cannot set a null [[Prototype]]');}
if (typeof o != 'object') { throw TypeError('Argument must be an object');}
F.prototype = o;
return new F();
};
})();
}
特别关注这两条线:
F.prototype = o;
return new F();
我在想,为什么设置不合适F.prototype.constructor = F;？
F.prototype …是否需要向 DOM 添加 an<img>才能预加载它？
$(function whenDOMIsHappy(){
var $img = $('<img />')
.load(loadHandler)
.error(errorHandler)
.attr({src:"squatchordle-squashgarden.jpg"});
$img.appendTo('body .preloads'); // is this at all necessary?
});
// assuming <div class="preloads" style="display:none;"></div> exists in <body>.
我看到过关于这项技术的混合信息。我正在使用 jQuery，但这个问题也适用于普通人。
我有兴趣在所有主要浏览器中保持此功能。
用户输入的日期输入2019-12-22给出以下值：
input.value:"2019-12-22"input.valueAsNumber:1576972800000input.valueAsDate:"Sat Dec 21 2019 16:00:00 GMT-0800 (Pacific Standard Time)"
input.valueAsDate.getUTCDate()返回22，这是用户输入的内容input.valueAsDate.getDate()返回21，而不是用户输入的内容我们希望结果date.toString()显示与日期输入中原始用户输入相同的结果
我们如何允许用户与当地时间交互，然后在脚本中获取正确的日期对象？