小编hea*_*LOW的帖子

我正在为wordpress制作媒体导入插件.我正在尝试实现拖放功能,以重新排序用户导入的媒体元素(音频和/或图像).我有一个<div>标签(我们称这些媒体的div,最多可容纳其他三个)<span>,<img>或<audio>标签.因此,我将已导入的所有媒体资产显示在一行中,并希望能够拖放以重新排序媒体div.使用html5实现基本的拖放操作没有问题.我的问题是,现在当我点击媒体div中的媒体子元素(<audio>或<img>)时,子元素是拖动事件的目标.有没有什么办法可以将拖动事件的目标重置为父元素,所以我拖动整个媒体div而不仅仅是媒体元素？我已经研究并阅读了冒泡和捕捉,但我试图利用它们的每一种方式,它都没有解决我的问题.有什么我想念的吗？如果可能的话,我宁愿避免使用jQuery,也绝对不能使用任何库或框架.TL; DR:当单击子元素时,如何将父元素作为拖动事件的目标？e.stopPropogation()

<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">

    <div class="npr-import-media-container" draggable="true">
        <audio src="<?php echo $audio->format->mp4->{'$text'}; ?>" controls></audio>
        <span class="npr-media-delete">X</span>
    </div>

    <div class="npr-import-image-container npr-import-media-container" draggable="true">
        <img class="npr-import-image" src="<?php echo $image->src; ?>" >
        <span class="npr-import-image-caption"><?php echo $image->caption->{'$text'} ?></span>
        <span class="npr-media-delete">X</span>
    </div>

    <div class="npr-import-add-media npr-import-media-container">
        Add Media+
    </div>

</div>

这是我的代码的HTML部分.最初有一些php功能可以循环显示原始源材料,以显示从原始文章导入的所有媒体元素,但我认为不必包含它.

作为一个有趣的项目，我正在制作一个用于创建原生 Web 组件的“框架”。我创建了一个 webpack 加载器，它解析自定义.comp文件中的一些 XML并导出一个 es2015 类。不幸的是，我找不到.comp在我的打字稿文件中导入这些文件的方法。

我试过在一个普通的 javascript 文件中导入我的自定义文件，一切都按预期工作；我可以看到我创建的加载器正在运行，并且得到了预期的输出。但是当我尝试导入打字稿文件时，我只是收到错误Cannot find module 'test/test.comp'。我尝试创建一个空的声明文件并注意到错误消息更改为File '[path]/test/test.d.ts' is not a module

这是我的 webpack 配置：

mode: 'development',
watch: true,
entry: './test/main.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
},
module: {
    rules: [
        {
            test: /\.ts/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.comp/,
            use: path.resolve(__dirname, 'core/compose-loader.js'),
            exclude: /node_modules/
        }
    ]
},
resolve: {
    extensions: ['.js', '.ts', '.comp'],
    alias: {
        'core': path.resolve(__dirname, "core/"),
        'test': path.resolve(__dirname, "test/") …