Event not working with reagent

[zendevil]

I have the following reagent component:

(defn i-have-a-creation []
  (let [drop (js/document.querySelector "drop")]
    (try (dnd/subscribe! drop :unique-key
          {:start (fn [e]       (println "d1 start"))
           :enter (fn [e]       (println "d1 enter"))
           :drop  (fn [e files] (println "d1 drop"))
           :leave (fn [e]       (println "d1 leave"))
           :end   (fn [e]       (println "d1 end"))})    
         (catch js/Object e (prn e)))
    [:div.sell-royalties-page
     [:div.drop {:id :drop} "Drop here"]]))  

even thought the start and end events are firing, dropping the file into the Drop here div opens the file in a new tab rather than firing the drop event. Why isn't this working?

[tonsky]

This was a long a time ago, and I don’t have a dev machine to check it, but try something like (.preventDefault e) in the drop handler?

Another idea to check I can give you right now is to take a look at https://github.com/tonsky/grumpy/blob/5d4876535cd1fd6ab2b5a2c6e21f522a9c3e4e21/src/grumpy/editor/media.cljs#L94. It uses this library, and from what I can see, :start/:end are set on js/document.documentElement but :enter/:drop/:leave are set on the DOM element. Why? Honestly I don’t remember :) Try it out?