dragging a {{#draggable-object}} with inputs breaks Safari

[caseyjenks]

I have a {{draggable-object}} with a pretty sizeable component with some form input elements inside. In chrome, I can drag and drop just fine, but in Safari, trying to start a drag on an input breaks the draggable object.

Here's a screencast I just shot: http://quick.as/qw4cb4yp
I start in Chrome, where it behaves as expected, and then I try things in Safari from :12 on, where things start breaking.

Any experience with this one?

[dgavey]

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.

[caseyjenks]

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

[dgavey]

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.

[caseyjenks]

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

[dgavey]

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.

[caseyjenks]

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

[dgavey]

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

[caseyjenks]

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

[dgavey]

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

[caseyjenks]

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

[dgavey]

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.

[caseyjenks]

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

[dgavey]

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.

[caseyjenks]

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

[dgavey]

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.

[caseyjenks]

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

[dgavey]

Try setting a higher z-index on the inputs.

[caseyjenks]

No luck

[dgavey]

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.

[dgavey]

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

[caseyjenks]

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.

[dgavey]

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.

[caseyjenks]

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)).

[dgavey]

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.

[caseyjenks]

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?

[dgavey]

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

[caseyjenks]

Hmm, it does

[dgavey]

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.

[AndersDJohnson]

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.

[AndersDJohnson]

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.

[AndersDJohnson]

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

[AndersDJohnson]

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

[dgavey]

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.