小编Vik*_*ukh的帖子

尝试dataTransfer在拖放序列期间将jQuery对象传递给属性.将属性添加到jQuert.event.props数组后我可以分配它,但它在drop事件期间返回undefined .不知道我在这里缺少什么 - 看起来真的很简单.

使用Javascript:

function dragClip(clip, event){

    event.dataTransfer.el = clip;

    /* Console confirms event.dataTransfer.el is the jQuery object */
}

function dropClip(target, event){

    target.append(event.dataTransfer.el);

    /* event.dataTransfer.el no longer has the object... where'd it go?? */
}

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        dropClip($(this), event);
    });

$('.clip').bind('dragstart', function(event){

    dragClip($(this), event);
});

更新:

重写以删除冗长.已经包含了其他东西,但匿名函数会做得很好:

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append(event.dataTransfer.el);
    });

$('.clip').bind('dragstart', function(event){

    event.dataTransfer.el = $(this);
});

UPDATE

根据@ barney的最终答案,我的最终工作代码.我注意到使用原始事件不允许我将对象作为数据传递,因此我应用了ID并在drop上重建了jQuery对象.通过摆脱声明的功能也收紧了一切.代码少,结果相同.

$('#titles')
    .bind('dragenter …

使用后useMutation()，缓存会更新，但useQuery()在 Home 组件中不会。

我尝试使用不同的fetchPolicy. 我可以在 Apollo 开发工具中看到新帖子，但需要更新页面才能看到更改

import { FETCH_POSTS_QUERY } from '../utils/graphql';

function Home() {
  const { user } = useContext(AuthContext);
  const {
    loading,
    data
  } = useQuery(FETCH_POSTS_QUERY, {
    fetchPolicy: 'cache-and-network',
  });
...

import { useMutation } from '@apollo/react-hooks';

import { useForm } from '../utils/hooks';
import { FETCH_POSTS_QUERY } from '../utils/graphql';

function PostForm() {
  const { values, onChange, onSubmit } = useForm(createPostCallback, {
    body: ''
  });

  const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, …

现在，这是使用 Chrome 文本转语音引擎的Chrome 应用程序的演示。

而且，这是 我修改此应用程序以作为“扩展”而不是应用程序工作的源代码。但是，tts 似乎不可用。我已在清单文件的“权限”下添加了“tts” 。

{
  "manifest_version": 2,
  "name": "Text2Speech",
  "version": "1",
  "minimum_chrome_version": "23",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "permissions": ["tts"],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["js/jquery-1.7.2.min.js", "js/app.js"]
    }
  ]
}

而且，这是我到目前为止的代码：

$(document).ready(function(){
  $(document).on("keypress", function(e) { 
    if ( e.shiftKey && ( e.keyCode === 108 || e.keyCode === 76) ) {
      console.log( "You pressed SHIFT + L" , $(prevElement).text());
      saySomething($(prevElement).text());
    }
  });
});
var prevElement = null;
document.addEventListener('mousemove',
  function(e){
      var …