Examples of web-based drag and drop functionality

19 Mar 2008 - 2:15pm
6 years ago
12 replies
1326 reads
Ari
2006

i led the original design and development of myheavy (now heavy 2.0).

among the features was an "itunes for video" that we developed in early
2006, which allows you to drag and drop video from another user's profile
into your own libraries, or move them between your libraries or even
re-arrange the order of your videos.

here's a link to how it looks and works (no mouse cursor):

http://www.flyingyogi.com/drag.png

drawbacks - cross browser drag and drop is very pokey.

Ari

On Wed, Mar 19, 2008 at 12:04 PM, Fine, David <David.Fine at bowne.com> wrote:

> Greetings
>
>
>
> I'm looking for public internet based websites (not fat client) that
> feature drag and drop functionality. Anybody have any favorite examples
> to share? Several email portals have one (like AOL) but I'm looking for
> some in the public domain.
>
>
>
> Thanks,
>
>
>
> David
>
>
>
> David B. Fine
>
> email: david.fine at bowne.com <mailto:david.fine at bowne.com>
>
>
>
>
>
>
> CONFIDENTIALITY NOTICE: The information in this Internet email is
> confidential and may be legally privileged. It is intended solely for the
> addressee. Access to this email by anyone else is unauthorized.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
--------------------------------------------------
www.flyingyogi.com
--------------------------------------------------

Comments

19 Mar 2008 - 2:24pm
SemanticWill
2007

jQuery has a very nice drag and drop ajax/js dom library for drag and drop -

think about iGoogle - home page - set it up - any widgets can be picked up
and moved to other places (pre-determined).

On Wed, Mar 19, 2008 at 12:04 PM, Fine, David <David.Fine at bowne.com> wrote:

> Greetings
>
>
>
> I'm looking for public internet based websites (not fat client) that
> feature drag and drop functionality. Anybody have any favorite examples
> to share? Several email portals have one (like AOL) but I'm looking for
> some in the public domain.
>
>
>
> Thanks,
>
>
>
> David
>
>
>
> David B. Fine
>
> email: david.fine at bowne.com <mailto:david.fine at bowne.com>
>
>
>
>
>
>
> CONFIDENTIALITY NOTICE: The information in this Internet email is
> confidential and may be legally privileged. It is intended solely for the
> addressee. Access to this email by anyone else is unauthorized.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

---------------------------------------------------------------------------------------------
Will Evans | CrowdSprout
tel +1.617.281.1281 | fax +1.617.507.6016 | will at crowdsprout.com

19 Mar 2008 - 2:33pm
Ari
2006

jquery is very nice and we use it in some places but like most of these
libraries, it's very heavy.

the myheavy/heavy 2.0 was written using prototype, which is more bare bones
and light weight.

On Wed, Mar 19, 2008 at 3:24 PM, W Evans <wkevans4 at gmail.com> wrote:

> jQuery has a very nice drag and drop ajax/js dom library for drag and drop
> -
>
>
> think about iGoogle - home page - set it up - any widgets can be picked up
> and moved to other places (pre-determined).
>
> On Wed, Mar 19, 2008 at 12:04 PM, Fine, David <David.Fine at bowne.com>
> wrote:
>
> > Greetings
> >
> >
> >
> > I'm looking for public internet based websites (not fat client) that
> > feature drag and drop functionality. Anybody have any favorite examples
> > to share? Several email portals have one (like AOL) but I'm looking for
> > some in the public domain.
> >
> >
> >
> > Thanks,
> >
> >
> >
> > David
> >
> >
> >
> > David B. Fine
> >
> > email: david.fine at bowne.com <mailto:david.fine at bowne.com>
> >
> >
> >
> >
> >
> >
> > CONFIDENTIALITY NOTICE: The information in this Internet email is
> > confidential and may be legally privileged. It is intended solely for
> the
> > addressee. Access to this email by anyone else is unauthorized.
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > Unsubscribe ................ http://www.ixda.org/unsubscribe
> > List Guidelines ............ http://www.ixda.org/guidelines
> > List Help .................. http://www.ixda.org/help
> >
>
>
>
> --
> ~ will
>
> "Where you innovate, how you innovate,
> and what you innovate are design problems"
>
>
> ---------------------------------------------------------------------------------------------
> Will Evans | CrowdSprout
> tel +1.617.281.1281 | fax +1.617.507.6016 | will at crowdsprout.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
--------------------------------------------------
www.flyingyogi.com
--------------------------------------------------

19 Mar 2008 - 2:42pm
SemanticWill
2007

Your right - the jQuery library has ALOT of stuff tossed in - most of which
you may not need just for drap and drop.

On Wed, Mar 19, 2008 at 3:33 PM, Ari Feldman <ari1970 at gmail.com> wrote:

> jquery is very nice and we use it in some places but like most of these
> libraries, it's very heavy.
>
> the myheavy/heavy 2.0 was written using prototype, which is more bare
> bones and light weight.
>
--
~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

---------------------------------------------------------------------------------------------
Will Evans | CrowdSprout
tel +1.617.281.1281 | fax +1.617.507.6016 | will at crowdsprout.com

19 Mar 2008 - 6:13pm
Tim Lynch
2005

On Wed, Mar 19, 2008 at 12:04 PM, Fine, David <David.Fine at bowne.com> wrote:

> I'm looking for public internet based websites (not fat client) that
> feature drag and drop functionality. Anybody have any favorite examples
> to share?
>

Similar to iGoogle, there's Netvibes (my start page of choice -
http://www.netvibes.com )...which has some nice drag-and-drop functionality
(dragging widgets and panels, dragging items to new tabs, etc). Probably
very similar to iGoogle.

Also, there is the classic example of the Netflix queue (
http://www.netflix.com/Queue - if you have an account)...which allows you to
reorder things nicely (though I've noticed performance issues recently with
a large queue).

- Tim

--
http://www.clampants.com
http://clampants.tumblr.com/
http://www.flickr.com/photos/clampants/

20 Mar 2008 - 7:44am
David Talbot
2008

I used toolman Javscript library : http://tool-man.org/examples/

This page has cool examples of drag and drop for lists and other
direct manipulations.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=27347

20 Mar 2008 - 6:23am
lisa halabi
2008

Whenever I'm looking Ajax/Web2.0 example sites I find this directory
helpful.

http://www.go2web20.net/

Hope this helps,
Lisa

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=27347

20 Mar 2008 - 1:01am
martinpolley
2007

In addition to iGoogle, Google Reader lets you drag and drop to reorder your
feed list. And in Google Calendar, you can move events using drag and drop.

Best,
--
Martin Polley
Technical Communicator
+972 52 3864280
<http://capcloud.com/>

20 Mar 2008 - 3:00am
denis408
2008

> I'm looking for public internet based websites (not fat client) that
> feature drag and drop functionality. Anybody have any favorite examples
> to share?
Another example of Drag-and-drop:
I recently started playing with Zude (www.zude.com). You can
*drag-and-drop* pages from other sites into Zude running in another
browser instance. Zude makes it easy to maintain your web presence in
many places from one place. For instance you can see if comments
happened on your flickr galleries, your MySpace page, your Facebook
page, and post to Twitter from your free Zude page.

-- Thanks!

Denis
_________________________
Denis M. Sweeney
sweeneyd at gmail.com

20 Mar 2008 - 9:42am
Katie Ware
2007

Some public examples I have seen are

www.bbc.co.uk

and I just saw that the redesigned LinkedIn now allows some dragging of components.

- Katie
_________________________________________________________________
In a rush? Get real-time answers with Windows Live Messenger.
http://www.windowslive.com/messenger/overview.html?ocid=TXT_TAGLM_WL_Refresh_realtime_042008

20 Mar 2008 - 9:58am
Dan Harrelson
2007

Scriptaculous shopping cart demo: http://demo.script.aculo.us/shop

The Flickr organizing tools use drag and drop extensively to arrange
sets and to place photos on maps:
http://flickr.com/photos/organize/

...Dan

On Mar 19, 2008, at 9:04 AM, Fine, David wrote:

> I'm looking for public internet based websites (not fat client) that
> feature drag and drop functionality. Anybody have any favorite
> examples
> to share? Several email portals have one (like AOL) but I'm looking
> for
> some in the public domain.

20 Mar 2008 - 10:09am
Hugh Griffith
2007

Netflix <http://www.netflix.com> uses drag and drop in their queue
management screen.

Hugh G.

On Thu, Mar 20, 2008 at 8:58 AM, Dan Harrelson <danh at adaptivepath.com>
wrote:

> Scriptaculous shopping cart demo: http://demo.script.aculo.us/shop
>
> The Flickr organizing tools use drag and drop extensively to arrange
> sets and to place photos on maps:
> http://flickr.com/photos/organize/
>
> ...Dan
>
> On Mar 19, 2008, at 9:04 AM, Fine, David wrote:
>
> > I'm looking for public internet based websites (not fat client) that
> > feature drag and drop functionality. Anybody have any favorite
> > examples
> > to share? Several email portals have one (like AOL) but I'm looking
> > for
> > some in the public domain.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

20 Mar 2008 - 12:22pm
Daphne Ogle
2005

I'm involved in a community source project that is building usable &
accessible UI components. One of our first is an accessible drag and
drop component, the Reorder. You can check out information (demo &
technical info) on the component on our wiki, http://wiki.fluidproject.org/display/fluid/Components
. The dev team is putting some final touches on the component to
allow it to work with screen readers (which will be in our next
release) but the current version works with a mouse and/or keyboard-
only interaction. We've implemented it as a Lightbox which allows
dragging and dropping thumbnails of images and now are working on a
Portlet Layout Manager. Info on all of these is on the wiki.

The Fluid project is a grant funded project in Higher Education that
is meant to improve UX in several open/community source projects
through education, community building, and delivery of UI components
and related design patterns. If you're interested you can find more
information at fluidproject.org (our website) and the wiki
(wiki.fluidproject.org).

Hope this helps!

-Daphne

On Mar 20, 2008, at 8:09 AM, Hugh Griffith wrote:

> Netflix <http://www.netflix.com> uses drag and drop in their queue
> management screen.
>
> Hugh G.
>
>
> On Thu, Mar 20, 2008 at 8:58 AM, Dan Harrelson <danh at adaptivepath.com>
> wrote:
>
>> Scriptaculous shopping cart demo: http://demo.script.aculo.us/shop
>>
>> The Flickr organizing tools use drag and drop extensively to arrange
>> sets and to place photos on maps:
>> http://flickr.com/photos/organize/
>>
>> ...Dan
>>
>> On Mar 19, 2008, at 9:04 AM, Fine, David wrote:
>>
>>> I'm looking for public internet based websites (not fat client) that
>>> feature drag and drop functionality. Anybody have any favorite
>>> examples
>>> to share? Several email portals have one (like AOL) but I'm looking
>>> for
>>> some in the public domain.
>>
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> Unsubscribe ................ http://www.ixda.org/unsubscribe
>> List Guidelines ............ http://www.ixda.org/guidelines
>> List Help .................. http://www.ixda.org/help
>>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
daphne at media.berkeley.edu
cell (510)847-0308

Syndicate content Get the feed