简体   繁体   中英

Drop event not getting fired consistently

Using HTML5 drag and drop stuff. My code looks like:

setupDragDrop: ->
  @currentDoc = tinyMCE.activeEditor.getDoc()
  @currentBody = $(@currentDoc).find('body')
  @drag_div = $(JST.drag_message());

  tinyMCE.dom.Event.add(@currentDoc, 'dragover', @dragStarted)
  tinyMCE.dom.Event.add(@currentDoc, 'drop', @dragEnded)

dragStarted: (event) ->
  @setDropArea() unless @dragInProgress
  event.stopPropagation()
  event.preventDefault()

dragEnded: (event) ->
  event.stopPropagation()
  event.preventDefault()
  files = event.dataTransfer.files
  @resetDropStyle()
  @uploadSelectedFiles(files)

And I am cancelling dragover event and file upload works for most of the stuff and the events get fired as usual. But for something like, Skitch image drag - no drop event fires. If you are a Mac User, Skitch is a tool for image editing and lets you drop stuff from the editor itself.

But same drag from Skitch works on Gmail, so I presume I am missing something here.

我不确定发生了什么,但是您可能想尝试使用可视事件书签来查看Gmail绑定到您要放置图像的目标的确切事件。

Since you're only showing a small part of your code, I'll point out a spot where you might have a problem, but you'd need to examine them in greater detail. I'm not overly familiar with CoffeeScript other than it compiles to just plain javascript, so this is pretty much guesswork.

@setDropArea() unless @dragInProgress : Assumin that drop never fires, is the drop area being properly set? It seems that unless would put @setDropArea() as never set when @dragInProgress is true.

In dragStarted and dragEnded , add some console.log notes to see what methods are firing and when. It may not be that it's not firing, but that it's firing at the wrong time.

Finally, take a look here: http://strd6.com/2011/01/jquery-drag-image-from-desktop-plugin/ This seems to be what you're trying to do (or at least similar) and might give you some hints as to what you're doing wrong.

Best of luck! If you get some results from any of these things, comment and I'll see if I can narrow it down some more.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM