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

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

My startup

The project's name is CloudDeck and you can read about it here in more detail.

Topics

Friends

Feeling so social

Tags

javascript (14) php (6) mootools (5) codeigniter (4) iscaffold (4) tutorial (3) crud (3) structure-synth (2) template (2) css (2) free (2) renders (2) google (2) experience (1) design, (1) user (1) iscaffold, (1) facebook (1) twitter (1) interface (1) canvas (1) drupal (1) wordpress (1) joomla (1) data-visualisation (1) resizing (1) cms (1) soundcloud (1) beatfader (1) combinator (1) magyar (1) windows8 (1) microsoft (1) clouddeck (1) ux (1) navigation (1) progress (1) transitions (1) reason (1) email (1) music (1) ie8 (1) bugs (1) bermuda-triangle (1) easing (1) clouddeck, (1) rc1 (1) bugfix (1) slimbox (1) tagging (1) cfdg (1) experiment (1) drag-and-drop (1) svg (1) blackout (1) firefox-extension (1) class (1) library (1) sitebuild (1) utf8 (1) nl2br (1) slideshow (1) wikipedia (1) dns (1) open-source (1) infovis (1) table (1) hack (1) script (1) google-buzz (1) forge (1) data-uri (1) inspiration (1) lists (1) ajax (1) konami-codes (1) trick (1) tabs (1) rss (1)