<pedrocorreia.net ⁄>
 

<How to create drag & drop interaction with jQuery ⁄ >




clicks: 2573 2573 2010-02-02 2010-02-02 goto programacao myNews programacao  Bookmark This Bookmark This


One of the more interesting actions in visual interfaces is the ability to drag an object and drop it on a selected target. Pretty much like what we do in real life at the supermarket. Grab a beer - drag to cart - drop it in the cart. But there are attributes in the product that it would be interesting to unveil in an application. For example, when you grab a beer you can feel if it's cold or not, and when you get to the checkout you pay the price of the bottle, which is a hidden attribute of the bottle. Today we will learn how to create drag & drop using jQuery and adding hidden attributes to the draggable items.

This is what we will be creating: when you start dragging the box, a block will display additional info about that object. It could be text as well as an image, but in order to make things easy I just added some text. Next, when you drop the item on the target area, a message will be displayed along with other hidden information contained in the object.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://www.ilovecolors.com.ar/jquery-drag-drop/




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 16499 16499 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 16344 16344 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 16041 16041 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 16533 16533 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 27135 27135 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 15741 15741 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 16412 16412 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


15 Handpicked jQuery Drop Down Menus Tutorials new ...

Here we are presenting another brilliant collection of 15 jQuery navigation menu that you can downlo (...)

clicks: 15451 15451 2012-05-10 2012-05-10 goto url (new window) smashingapps.co... goto myNews programacao