on-track event no longer fired

[ghost]

Hi,

at first sorry for my english.

I'm trying to create a dashboard with some widgets with Polymer.

In my template, I use :

• "on-down" to keep some informations about my selected widget (Id, width, height, ....)
• "on-track" to move it in my dashboard
• "on-up" to delete previous informations kept with "on-up" event

If I release my left mouse out of my widget (out of my window for example, my widget will never have x or y coord < 0), the next time I'll click to select a widget and move my mouse, no track event will be fired. I need to click down then click up on my widget to "reactivate" on-track event, and then clickdown and drag will work perfectly.

Did anyone have already seen this? Thanks

[dfreedm]

Can you make an example of what you're describing? If you drag outside of the window, then it may be the case that the "up" event did not fire and the track gesture may have to reset like you have said.

I would not expect that behavior if you just drag inside the window.

[ghost]

Hi

sorry for the long long long answers (I closed the tab and totally forget it until I was facing again the problem). Hum, it's a kinda difficult to make an simple example, because of all the code The problem occurs not only when I drag outside the window, but when i drag outside my container. My draggable widgets are not allowed to leave this container, so, they can't have top or left position less than 0

Edit : it seems that this occurs if the mouse is not on the draggable element when the on-up is done

[AdamDreessen]

Hi there, I ran into the same problem and was able to build a small testcase with two empty <div> elements. Turns out that the problem was the browser's native drag&drop functionality (which you have to prevent) to fix this. When you start dragging on the draggable element and then leave this element, the browser kind of selects content (like if you want to select a text portion), and the next time you start dragging you actually drag&drop the selected content (even if there's no selected content visible).

For me this solution works:

<div id="drag-and-drop-area" ondragstart="return false;" ondrop="return false;">
          <div class="draggable-element"></div>
          <div class="draggable-element"></div>
</div>

@bastienarm: Maybe this works for you, too!?

[ghost]

@AdamDreessen totally forgot (again) this topic, and have the same problem today, and go back here ...

Made one or two simple test with this (yeah it's ugly, but it's enough for testing!)

Right part will be used to create schedule using on-up/on-track/on-down Left part is just informations.

Without "return false;" the problem is here. With it, there is no problem, so I think it seems to be solved ... Just have to make more tests to be sure !

Thanks a lot ! How did you find a solution like this? :o

[AdamDreessen]

@bastienarm Glad to hear that it works for you! I don't remember exactly how I came up with this solution. But we often have bugs that come from browser events vs. Polymer events - so maybe I just figured out by trial and error ;-) Good luck with your project...!

[sz332]

Hello, I ran into the same problem after using the example from polymer documentation. I also added the ondragstart and ondropstart to the container div the following way:

<div id="panel" ondragstart="return false;" ondrop="return false;">

After that it was working perfectly. I think this information should have to be added to the official polymer documentation.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.