Using Drag and Drop In Websites?

Question

As i would now like to develop better webapps then the basic php and javascript ones that i currently create, i would like to know how web devs create some of the amazing websites that i have used over the past few years.

For example, On some of the websites that i visit they have the ability to drag and drop items from a palette onto the webpage. I am thinking mostly about some of the online diagramming tools that i have seen. How do they do this because i am currently baffled.

I would like to start creating these types of websites and currently i have no idea how to proceed. I first want to create some small tester websites that allow just very basic drag and drop use.

If anyone could point me in the right directions in terms of links to tutorials or library's that have this feature then i would be most grateful.

Cheers.

Answer 1

As far as a simple drag and drop goes, you could do something like you said with a palette and a dialog that changes color based on the drop.

I would recommend the jQuery framework as it is very easy to use and has a great API.

The steps for the test itself are pretty simple:

Have a palette with the colors: [ ][ ][ ][ ][ ] These can be table cells (<td>) that you can click on and 'drag'.

You could do tables and when you click on one of the tables, you use jQuery to get the background color. When you actually click on the <td>, assign the color to a variable.

You could create a semi-transparent <div> that follows the mouse as you drag it.

Set a mouseup listener on the target <div> (the one that would change color) and have jQuery set the background of the <div> to the color in the variable.

Edit: There will be a slight problem with 'text selection' when you drag something. A fix can be found here: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting

Answer 2

jQuery is easy to learn (but I'm not 100% sure it does DnD). I personally like MochiKit, which has excellent Drag and Drop functionality, and Dojo is very good too (and has some fancy widgets).

Answer 3

Can be doing using the jquery UI

Draggable

Droppable

Answer 4

The best, most future-proof (in terms of immunity to browser changes and updates) way to implement drag/drop functionality is to use true rich client (RIA) technology like Adobe Flex, Silverlight, or JavaFX.

Answer 5

I think you should consider development in GWT which is basically a Java based wrapper for Javascript. It has a lot of community support and a complete drag and drop support is available in the form of a library - http://code.google.com/p/gwt-dnd/

Since GWT is coding in Java, it is not really a new territory to venture into but knowledge of Javascript, css, html goes a long in way in building robust GWT application. Plus it allows you to debug your code in eclipse just like Java code.