dragging a {{#draggable-object}} with inputs breaks Safari about ember-drag-drop HOT 33 OPEN

Hey, looks like it's probably a Safari bug of some kind. I'll try and make a failing case and see if I can figure a workaround for it.

from ember-drag-drop.

Is there any way to have a draggable object, but be able to limit where you can start the drag to a certain element? It would be nice if I could have an icon they start the drag from within, instead of having the entire object be draggable. That would solve the problem as well

from ember-drag-drop.

Well, you could wrap the {{#draggable-object}} around an icon other than the component. But then the visual for what you are dragging wouldn't be accurate (it would look like you are moving the icon. I have a couple of ideas on how I could implement that relatively easily though. I'll try and get at that change tonight.

from ember-drag-drop.

Toyed around with it last night and that's what I found. You are the man!

from ember-drag-drop.

I added the ability to keep the drag ability strictly to a drag handle specified in the component call. It's currently on the develop branch until I can finish the tests for it.

https://github.com/mharris717/ember-drag-drop/tree/develop
I updated the demos so you can see it in action as well.

You can do a npm install git:mharris717/ember-drag-drop#develop to try it out before I publish it.

from ember-drag-drop.

Awesome! Working flawlessly in Chrome and Safari, but it seems to be still a little buggy in Firefox.

from ember-drag-drop.

Strange it seems to work fine in Firefox for me. Can you explain to me what the issue is?

from ember-drag-drop.

happens in firefox only: http://quick.as/agqCaJBa

from ember-drag-drop.

Odd, I'll be publishing the version update this week. When I do that there is a simple demo that shows it working fine in Firefox. It looks for the is(':hover') in jquery on the drag element to know whether or not the element is allowed to be dragged. I did find some in saying that that wasn't available in some versions of Jquery. Or perhaps it's just flaky at detecting it sometimes.

There also might be another element positioned above it that is getting the hover rather than the drag handle. I was thinking about maybe changing the way it detects the hover event as well.

Here is the SO which explains some of the issues with it. Do you have any errors in your console log in Firefox?

http://stackoverflow.com/questions/8981463/detect-if-hovering-over-element-with-jquery

from ember-drag-drop.

Hmm, no errors in console. No elements positioned above. jQuery version is 2.1.4.

from ember-drag-drop.

Ok, I guess I'll try my other idea for detecting mouse position. It should be less prone to errors, and eventually be more friendly to touch events. Hopefully I get to that tonight.

from ember-drag-drop.

It also seems like it's doing some funky stuff with clicks in Firefox: http://quick.as/p3wtb690

from ember-drag-drop.

It's not clear from the video what the issue is, but I'm starting to wonder if it's related to the draggable-object components at all. We use them in really complicated layouts as well, with no issues at all.

from ember-drag-drop.

Hmm, any suggestions on where I should look or check?

from ember-drag-drop.

Well, start with removing the drag components from the template to see if the issue still happens in Firefox. Also if you could explain what the issue is, I can't really tell from the video.

from ember-drag-drop.

Yes, removing the {{draggable-object}} fixes it. Ahh, I'm trying to drag and select text in the inputs.

from ember-drag-drop.

Try setting a higher z-index on the inputs.

from ember-drag-drop.

No luck

from ember-drag-drop.

Here is a SO on the issue. http://stackoverflow.com/questions/21680363/prevent-drag-event-to-interfere-with-input-elements-in-firefox-using-html5-drag

Try setting draggable=false on the input elements, if that doesn't work, the other option would be for me to remove the draggable attribute on the parent element until the drag handle is clicked. Which is something I will do, but not sure when I'll find time.

from ember-drag-drop.

Were you able to set draggable=false on the inputs? Did that work?

from ember-drag-drop.

Yes, setting draggable on the {{draggable-object}} to false fixed it up, although still not sure why drag and drop doesn't work in Firefox with the drag handle. Need to spend more time digging in, perhaps it's something on my end.

from ember-drag-drop.

According to the SO article I linked to it's a bug in Firefox. Logged this summer https://bugzilla.mozilla.org/show_bug.cgi?id=1189486 When I update the drag handle method I will disable the draggable attribute so you won't have to do this though. Should get to it this week.

from ember-drag-drop.

Awesome!

On Wednesday, December 2, 2015 at 2:17 PM, Derek Gavey wrote:

According to the SO article I linked to it's a bug in Firefox. Logged this summer https://bugzilla.mozilla.org/show_bug.cgi?id=1189486 When I update the drag handle method I will disable the draggable attribute so you won't have to do this though. Should get to it this week.

—
Reply to this email directly or view it on GitHub (#21 (comment)).

from ember-drag-drop.

Ok, demos on the readme and updates are published as version 0.2.3 You shouldn't need the draggable=false on the inputs anymore.

from ember-drag-drop.

Hmm, I see that it's updating the draggable attribute correctly now, but I still can't get it to initiate a drag in Firefox: http://quick.as/gg4C9bZ2

I've tried a few things but am stumped. Any ideas?

from ember-drag-drop.

Starting to hate Firefox… Does it work for you on the demo I posted? http://mharris717.github.io/ember-drag-drop/handle

from ember-drag-drop.

Hmm, it does

from ember-drag-drop.

Well I'm rather stumped too, you would have to throw a debugger; on line 47 of the addon/components/draggable-object.js in the dragStart function to see why the drag event is not being triggered. For some reason it's being prevented. But without a simple jsbin reproducing the problem or access to your code, it's impossible for me to see why.

from ember-drag-drop.

I'm getting behavior that may be same or similar. In my case, drag end events are being fired immediately after drag start events, then the draggable-object gets stuck with opacity: 0.5, though the is-dragging-object class is removed.

from ember-drag-drop.

Seems likely to be a Chrome bug triggered when manipulating the DOM within a drag start event handler, according to http://stackoverflow.com/a/20733870.

from ember-drag-drop.

When I modify the source code by wrapping the draggable-object component's dragStart logic with a Ember.run.later of 10 milliseconds, then the drag start seems to work more reliably. However, then on drop, I get this error:

Uncaught no obj for key getObj
 @ obj-hash.js:16getObject
 @ coordinator.js:9handlePayload
 @ draggable-object-target.js:10handleDrop
 @ draggable-object-target.js:17acceptDrop
 @ draggable-object-target.js:21drop
 @ droppable.js:107_emberRuntimeSystemObject.default.extend.trigger
 @ ember.debug.js:44198superWrapper
 @ ember.debug.js:22060Backburner.run
 @ ember.debug.js:681Backburner.join
 @ ember.debug.js:705run.join
 @ ember.debug.js:20147_emberMetalAssign.default.handleEvent
 @ ember.debug.js:45072exports.default._emberMetalMixin.Mixin.create._Mixin$create.handleEvent
 @ ember.debug.js:42009exports.default._emberRuntimeSystemObject.default.extend._bubbleEvent
 @ ember.debug.js:43089(anonymous function)
 @ ember.debug.js:43031jQuery.event.dispatch
 @ jquery.js:4670elemData.handle
 @ jquery.js:4338

from ember-drag-drop.

Turns out that error was because event.dataTransfer.setData needs to be called synchronously in the dragStart handler. Pull request coming shortly...

from ember-drag-drop.

Awesome thanks for the PR. So hard to fix these things with out a failing test. I'll pull it in and release a updated version soon.

from ember-drag-drop.