Draggable Boxes with CSS3 - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
May 12, 2013 at 11:23 pm #44732

Elandry
Member

Hi all,

I’ve seen some java libraries for creating draggable boxes; as in you can click and drag the items around the screen.

I’m working on finishing up my website for my Digital Media class and all of these codes are pretty complicated for a beginning class and I cannot use code libraries so my question is:

Is there some way of using CSS3 or very simple java (as in least amount of code possible) to create draggable boxes?

Thanks for reading and any responses or advice.

May 13, 2013 at 12:33 am #134871

unasAquila
Participant

html5 has native drag (all latest browsers support it)

draggable has 7 events which are

* dragstart
* drag
* dragenter
* dragleave
* dragover
* drop
* dragend

here is a quick codepen to show a quick sample
[drag](http://codepen.io/anon/pen/gdHAv)

May 13, 2013 at 1:28 am #134878

Elandry
Member

When I try to drop that picture it snaps back, anyway to make it stay where it’s dropped?

May 13, 2013 at 2:00 am #134880

unasAquila
Participant

try this one

http://codepen.io/anon/pen/gfwsu

May 13, 2013 at 2:20 am #134881

Elandry
Member

I suppose that is drag and drop but is there anyway to modify the java so that it can be dropped anywhere the user chooses to, or maybe increasing the area of where it can be dropped?

Thanks so much for your help BTW.

May 13, 2013 at 2:29 am #134883

unasAquila
Participant

yes there is using the events

* dragstart
* drag
* dragenter
* dragleave
* dragover
* drop
* dragend

and css.

Obviously i can only lead you in the right direction you will need to do the rest.

offtopic – it’s Javascript not Java

May 13, 2013 at 2:33 am #134884

Elandry
Member

Okay, I’ll look into them thanks a bunch.

Doh! That’s what I meant..

May 13, 2013 at 2:47 am #134887

unasAquila
Participant

I understood you exactly :D

What exactly is the project parameters.

May 13, 2013 at 3:08 am #134888

Kitty Giraudel
Participant

HTML5 drag’n’drop API is to a point where I’d rather use JavaScript to do such a thing. My two cents. :)

May 13, 2013 at 3:36 am #134890

unasAquila
Participant

here is an example which can be dropped anywhere.

[drop it](http://codepen.io/anon/pen/AIekK)

but it may be more than you need.

May 13, 2013 at 9:45 am #134913

Elandry
Member

That’s exactly what I’m looking for. Basically my website is a Windows 95 themed desktop and I will be putting all information and projects into these movable boxes to make it more interactive.

Question:

I need to use this for multiple items per page, how can I make this work in the javascript for a class rather than an id?

May 13, 2013 at 10:51 am #134920

unasAquila
Participant

A few tutorials that may help

[Tutorial One](http://www.netmagazine.com/tutorials/create-drag-and-drop-features-hmtl5)
[Tutorial Two](http://runbusi.com/blog/21/HTML5-:-Drag-and-Drop-API)

May 13, 2013 at 11:34 am #134926

unasAquila
Participant

I forked it and came up with this [Forked](http://codepen.io/anon/pen/IjrDs)

May 13, 2013 at 11:57 am #134935

Elandry
Member

Is there a reason why in both Dreamweaver and my browser (Chrome and IE) that it won’t enable the drop?

I’ve tried the tutorials and the example code where it works in codepen but when put into Dreamweaver it will only showing you dragging it around but won’t allow it to be dropped anywhere, even though the code is the same.

May 13, 2013 at 12:01 pm #134937

Paulie_D
Member

Pretty certain that the version of webkit in DW is just the basic stock version and won’t support that HTML feature.

As for Chrome & IE, it will depend on your version and whether they have that feature implemented.
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

The forum ‘CSS’ is closed to new topics and replies.