show/hide

[Beverleyh]

I was playing around with @Shikkediel’s vanilla JS draggable script and decided to merge it with what I had so far with the dock-to-sidebar widget demo.

I also added local storage save functionality (where each display state and position is saved when widgets are moved or docked).

You’re welcome to further modify it for your needs: http://fofwebdesign.co.uk/template/_testing/widgets-show-hide-dock-drag-local-storage.htm

[Shikkediel]

Nice. :-)

Sorry @Allie_P, I hadn’t noticed you posted another question. Both random placement scripts should work fine and they’re more or less the same, I recall the one I proposed is just a bit more basic. The choice of draggable code generally depends on if you’re using jQuery already or not. Functionality isn’t much different.

[Allie_P]

@Beverleyh Is it just me or is draggability not working very well?

[Beverleyh]

Seems fine here. What device/browser have you noticed a problem on and in what circumstances?

[Shikkediel]

Might be the (lack of) z-index thingy… I was thinking about adapting my Codepen scripts for multiple elements but I suspect Beverly could fix in it a jiffy.

[Allie_P]

OS X / Safari

They get stuck all the time when I try to drag them across the screen.
Have a look: https://streamable.com/8tf6

[Beverleyh]

Sorry, I don’t have that environment to test in :(
Only iOS /Safari

What z-index change do you suggest Shikkediel? Do you have access to OS X at your side too?

[Shikkediel]

Nope, no option to check on any Applish device. Windows 7 here…

What z-index change do you suggest

Just lifting the currently dragged item above all other content, any higher placed element can prevent fluid dragging at the moment when they are overlapping.

Or maybe even keeping track of all z-indexes and leaving the items in the last recorded order but that’s a bit more complicated of course.

[Beverleyh]

I’ll look at z-index again tomorrow on Windows 7/8/10 + Android, but on iOS (on iPhone at the mo) the z-index doesn’t seem to pose a problem. The dragged boxes maintain fluid dragging even when they pass underneath other elements.

[Shikkediel]

Hmm… looking back at the code, it might be up for a small revision. I suppose I used the following so it was easier to pass on this but it probably makes more sense to use window instead here :

this.addEventListener('mousemove', dragIt, false);

Meaning some other lines would have to be changed as well… but the overlapping issue should disappear.

[Beverleyh]

OK – I’m back in the office now and can see that a really fast drag will cause the mouse to lose contact with the widgets, but a moderate-to-fast drag seems fine. I think its a reasonable expectation for users to move the widgets in a ‘purposeful’ way if they want to actual place them elsewhere, otherwise just close them altogether. Just my thoughts though.

Anyway, I added the z-index change to lift dragged widgets to the foreground, and then return them to ‘auto’ z-index when dropped. This is done with the addition and removal of a ‘.move’ class so that other CSS decorations can be applied during the drag action (such as a box-shadow).

[Shikkediel]

Hardly bothersome indeed and an easier fix. Works well.

[Beverleyh]

I’m pretty happy with it too. Yey for teamwork! :D

[Allie_P]

I think its a reasonable expectation for users to move the widgets in a ‘purposeful’ way if they want to actual place them elsewhere, otherwise just close them altogether.

Sorry, but I’m gonna have to disagree. I think on a big screen is pretty easy/common to drag something from one side to the other with a short but fast movement. :(

Here’s what I was able to accomplish so far:

http://codepen.io/Allie_P/pen/QNYqRp

I used this for draggability as both of @Shikkediel pens were presenting some issues. It works fine.

For the positioning I used this pen but for some reason it keeps aligning the objects. I have var ensued = false; so I’m not sure why that’s happening. Any ideas?

[Shikkediel]

Here you go…

[Author]

Posts