2009 1119

How to write drag and drop code from scratch?

How to write drag and drop code from scratch? Drag and drop is a very cool feature in the browsers too, if really needed. Most JS libraries has this functionality, from jQuery to MooTools. But how they do it?

Well, it's not black magic, actually really simple.


The idea
You need to combine two different mouse events: mouseDown and mouseMove, then track the mouse position, update an elements position, finally cancel the mouseMove event on mouseUp.

The goal
Create a freely movable window that you can move with a handle.

Click "read more" to see the codes.

Category: Programming - Tags: javascript tutorial drag-and-drop - 2 Read more
2009 1119

3D audio visualisation in javascript

3D audio visualisation in javascript I've found an interesting experiment by Mr Doob. It's a proof of concept visualisation, using the HTML5 audio tag, JavaScript and SVG.
Well done, Mr Doob!

Check it out (Use Google Chrome for best experience.)

Category: Coffee break - Tags: javascript experiment svg Read more
2009 1116

Beta palm

Beta palm This image is generated with the amazing CFDG software. If you are not familiar with it, then check out their gallery to see what is it capable of.
What I like about this program is that you can create very complex structures with a few lines code.

Category: Generative arts - Tags: cfdg - 2 Read more
‹ First  < 3 4 5 6 7 8 9 10 11 12 > 

Briefing

Me myself and I
I love coding, especially for the web. I'm in the online industry for 6 years. My favourite toys are:
JavaScript, PHP, XHTML, MySQL, Canvas, Flash
Váltás magyar nyelvre

Topics

Friends

Feeling so social

Tags

javascript (12) php (6) mootools (4) iscaffold (3) codeigniter (3) crud (3) tutorial (2) google (2) renders (2) structure-synth (2) css (2) template (2) free (2) google-buzz (1) script (1) forge (1) hack (1) table (1) open-source (1) rc1 (1) infovis (1) rss (1) interface (1) canvas (1) design, (1) user (1) experience (1) soundcloud (1) resizing (1) joomla (1) bermuda-triangle (1) wordpress (1) drupal (1) data-visualisation (1) data-uri (1) konami-codes (1) tagging (1) slimbox (1) bugfix (1) cfdg (1) blackout (1) firefox-extension (1) utf8 (1) class (1) slideshow (1) nl2br (1) experiment (1) svg (1) library (1) ajax (1) sitebuild (1) tabs (1) inspiration (1) lists (1) drag-and-drop (1) wikipedia (1) dns (1) trick (1)