javascript drag and drop: problems with dragleave

i don't have much experience with javascript and jquery, but recently i started playing with MeteorJS (and i love it - but about this in a different post).

i'm dragging something onto a div and want an effect of openning jaws. yes, thats right - jaws :) i settled with jquiery-ui toggle, but then decided that addClass/removeClass would be good enough.

and here started the trouble with drag events - as for a single drag over my (large) area i got too many enter/over/leave/exit events, that were causing the "jaws" to toggle non-stop instead of opening on dragenter and closing on dragexit (or dragend - but i never got this event fired; or dragstop - which should be jquiry's killer drag finish event - alas not fired either for some reason).

it took me some time to realize that the nested div and other elements withing the target div were causing this constant enter/leave madness, which was breaking my flow.

so what to do? in an enviroment clean as this one everything is nice and clean, so how can i stop the sub elements from breaking my drag flow? it seems impossible...

so my idea to solve it is based on this:

my events are handled for the div id:

'dragenter #sidebar': function(e, t) {

but what if i'd be able to differentiate between event targets and fire the closing 'close jaw' event when a really non related target sends one of the drag events? but how? here's how:

as you can see, for example on mozilla's site, the drag events have a currentTarget property, but also a relatedTarget property - which it turns out we can use to detect the origin of the previous event - that is, for example - for a dragLeave event: the element that drag operation has left.

so now, our event catcher/handler becomes like this:

  'dragleave .drag-leave': function(e, t) {
    e.stopPropagation();
    e.preventDefault();

aaaaand - we need to add to all subelements of our div the subclass .drag-leave, so that we can check with a simple

if (e.relatedTarget && e.relatedTarget.className.search("drag-leave") == -1) {
      console.log(e.relatedTarget);
      $('#animTarget').removeClass("myClass", 1000, "easeOutSine");
    }

if we should close the jaw and finalize our effect.

so

is this a silly approach? please let me know, for now it works for me

"Do Something!" with Go, JQuery and Delicious api

it is best when learning a new programming language to exercise on some practical problem.
well, one problem i have is having to put up with plugins for delicious, so i decided to write a server to which to send link information and which in turn would use delicious' api and add new link.
the half-baked, but working version of this i posted at https://github.com/esdee-git/deligo.
it was a good exercise with go, and wiring it with bootstrap and jquery in the frontend - good, fun stuff.
some points to take from this..
go is a fine language to write in, even for prototypes for which i had special place reserved for python.
definitely the creators of the language limited it to specific needs, yet it is a powerful language - at least from my humble experience with it.
on the other pole - bootstrap is quite handy and it was high time i got touch of real jquery

overall - i finally managed to follow two mantras: "do something" and "finish something", so this might be a good start to develop something bigger and better

salut!