Sorry if this sounds cynical, ( i do love script.aculo.us scripts ) ,
but I am wondering if people know of some good real world
examples of uses of drag n drop and sortable lists.
such a cute script will likely be *ab*used as much as it is used.
obviously the point here is to use script.aculo.us to improve
the user interface rather than just have some k00l eFX.
e.g. the drag n drop instantly makes me think of a shopping
cart. but it is not quite as simple as bolting on the drag n drop
onto Amazon or whatever - it requires a rethinking of how
people would like to shop and various system design problems
need to be solved to create a well designed shopping cart.
eg.2 i''ve been thinking about implementing the visual
effects into my website, simply cos they look great and have
a real "wow" factor to them, but have hesitated, because i also
don''t want to make the user wait unecessarily. (thought about
using AJAX to help here, i.e. whilst the user is watching the
effect, AJAX is getting the next page or information).
i am not trying to sound negative here, i guess i''m trying to
generate a discussion on the finer points of this great tech.
----- Original Message -----
From: <rails-spinoffs-request@lists.rubyonrails.org>
To: <rails-spinoffs@lists.rubyonrails.org>
Sent: Tuesday, July 19, 2005 9:00 PM
Subject: Rails-spinoffs Digest, Vol 2, Issue 21
> Send Rails-spinoffs mailing list submissions to
> rails-spinoffs@lists.rubyonrails.org
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> or, via email, send a message with subject or body ''help''
to
> rails-spinoffs-request@lists.rubyonrails.org
>
> You can reach the person managing the list at
> rails-spinoffs-owner@lists.rubyonrails.org
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of Rails-spinoffs digest..."
>
>
> Today''s Topics:
>
> 1. quick dragdrop question (dave crane)
> 2. Drag and drop question (Chih-Chao Lam)
> 3. Nested drag and drop rendering issue with ie
> (argsv@technologicaleden.com)
> 4. Re: Nested drag and drop rendering issue with ie (Thomas Fuchs)
> 5. Re: a frightfully newbish question about dragdrop.js (Eric)
> 6. Re: a frightfully newbish question about dragdrop.js
> (Thomas Fuchs)
> 7. draggables bug(s) (Jesse Andrews)
> 8. Re: Tip Sheet for AJAX (Andrew Kaspick)
>
>
> ----------------------------------------------------------------------
>
> Message: 1
> Date: Tue, 19 Jul 2005 17:25:38 +0100
> From: dave crane <dave@cranefamily.force9.co.uk>
> Subject: [Rails-spinoffs] quick dragdrop question
> To: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <20050719120136.33D7D39D46@wrath.rubyonrails.com>
> Content-Type: text/plain; charset="iso-8859-1"
>
> Hi,
>
> I want to do some custom logic on items being dragged and dropped - I need
> an
> event callback that has a reference to both the element being dropped (the
> LI),
> and the target element that it''s being dropped onto (the UL).
I''ve found
> the
> Sortables.create option for creating an onUpdate and onChange handler, and
> done
> the following:
>
> function selectItem(target){
> window.status=target.id;
> }
> window.onload=function(){
>
>
Sortable.create("firstlist",{tag:''div'',containment:["firstlist","secondlist","firstCell","secondCell"]});
> Sortable.create("secondlist",
> { tag:''div'',
>
containment:["firstlist","secondlist","firstCell","secondCell"],
> onUpdate:selectItem
> }
> );
> }
>
> I set a breakpoint in selectItem, and play with the two lists.
> selectItem() gets
> called whenever an item is dropped onto the list, with a single argument
> being
> the UL that it''s being dropped on to. Inside the callback,
''this'' refers
> to an
> object that also holds a ref to the UL, and a string called
''lastValue''
> with a
> value of
>
>
"secondlist[]=undefined&secondlist[]=undefined&secondlist[]=undefined&secondlist[]=undefined&secondlist[]=undefined&secondlist[]=firstlist2&secondlist[]=undefined"
>
> which I won''t pretend to understand :-)
>
> How do I get a ref to the item being dropped? (I had a look at the
> onChange
> handler too, it looked hopeful from the code. I set up a similar dummy
> handler
> function, but it doesn''t seem to get invoked when I''m
working on the
> list...)
>
> Many thanks,
>
> Dave
>
> --
> Dave Crane
> author ''Ajax in Action''
http://www.manning.com/books/crane
> http://dave.sunwheeltech.com/wordpress/
>
>
> ------------------------------
>
> Message: 2
> Date: Tue, 19 Jul 2005 09:35:23 -0700
> From: Chih-Chao Lam <chao@osafoundation.org>
> Subject: [Rails-spinoffs] Drag and drop question
> To: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <31E7A065-0A29-480B-9A2F-003C3E688B5D@osafoundation.org>
> Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
> Hi Thomas and all,
>
> Thanks again for the wonderful script.aculo.us library. I have a drag
> and drop question (sorry if I''m posting this a second time,
I''m not
> sure if my first post went through).
>
> For my drag and drop event, I would like for the drop to do an
"add"
> if the option or alt key is pressed, and do a "move" otherwise.
Is
> there an easy way to do this with the existing API? If not, can I get
> passed an Event for my onDrop() function to test if any of these meta
> keys are pressed?
>
> Thanks,
> chao
>
>
> ------------------------------
>
> Message: 3
> Date: Tue, 19 Jul 2005 15:15:35 -0400
> From: argsv@technologicaleden.com
> Subject: [Rails-spinoffs] Nested drag and drop rendering issue with ie
> To: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <courier.42DD5157.000054ED@pluto.jtlnet.com>
> Content-Type: text/plain; charset="utf-8"; format=flowed
>
> First and foremost, excellent library - excellent work. Thank you.
>
> Now, here''s what I''m doing:
>
> <div id="wrapper">
> <fieldset id="page_1">
> <legend>Page</legend>
> <fieldset id="group_1">
> Group
> </fieldset>
> <fieldset id="group_2">
> Group
> </fieldset>
> </fieldset>
>
> <fieldset id="page_2">
> <legend>Page</legend>
> <fieldset>
> Group
> </fieldset>
> </fieldset>
> </div>
>
> Both the ''pages'' and ''groups'' are setup
up as sortable drag and drops.
> This
> works well in Firefox. On IE though, when clicking and moving a
> group(inner
> child), the parent is also moved causing quite a mess. I''ve
tracked the
> problem down to the startDrag function of the Draggable object. I fixed
> the
> issue by adding the code below.
>
> startDrag: function(event) {
> //**MOD BELOW*/
> if (!event) var event = window.event;
> event.cancelBubble = true;
> if (event.stopPropagation) event.stopPropagation();
> //**MOD ABOVE**/
>
> I have no idea if this is the best solution, I just started working the
> lib
> yesterday, but it works for me currently.
>
> argsv
>
>
> ------------------------------
>
> Message: 4
> Date: Tue, 19 Jul 2005 22:51:30 +0200
> From: Thomas Fuchs <thomas@fesch.at>
> Subject: Re: [Rails-spinoffs] Nested drag and drop rendering issue
> with ie
> To: argsv@technologicaleden.com
> Cc: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <DC970ACE-DB15-4390-BC16-A796B666F695@fesch.at>
> Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
> There''s a bug in the Prototype library that causes event bubbling
on IE,
> so this will probably fixed soon, thx for reporting this anyway. :)
>
> Thomas
>
> Am 19.07.2005 um 21:15 schrieb argsv@technologicaleden.com:
>
>> First and foremost, excellent library - excellent work. Thank you.
>> Now, here''s what I''m doing:
>> <div id="wrapper">
>> <fieldset id="page_1">
>> <legend>Page</legend>
>> <fieldset id="group_1">
>> Group
>> </fieldset>
>> <fieldset id="group_2">
>> Group
>> </fieldset>
>> </fieldset>
>>
>> <fieldset id="page_2">
>> <legend>Page</legend>
>> <fieldset>
>> Group
>> </fieldset>
>> </fieldset>
>> </div>
>> Both the ''pages'' and ''groups'' are
setup up as sortable drag and
>> drops. This works well in Firefox. On IE though, when clicking
>> and moving a group(inner child), the parent is also moved causing
>> quite a mess. I''ve tracked the problem down to the startDrag
>> function of the Draggable object. I fixed the issue by adding the
>> code below.
>> startDrag: function(event) {
>> //**MOD BELOW*/
>> if (!event) var event = window.event;
>> event.cancelBubble = true;
>> if (event.stopPropagation) event.stopPropagation();
>> //**MOD ABOVE**/
>> I have no idea if this is the best solution, I just started working
>> the lib yesterday, but it works for me currently.
>> argsv
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>
>
>
> ------------------------------
>
> Message: 5
> Date: Tue, 19 Jul 2005 17:03:22 -0400
> From: Eric <ermau88@gmail.com>
> Subject: Re: [Rails-spinoffs] a frightfully newbish question about
> dragdrop.js
> To: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <42DD6A99.1060908@gmail.com>
> Content-Type: text/plain; charset="us-ascii"
>
> An HTML attachment was scrubbed...
> URL:
>
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050719/fe740ea8/attachment-0001.html
>
> ------------------------------
>
> Message: 6
> Date: Tue, 19 Jul 2005 23:09:24 +0200
> From: Thomas Fuchs <thomas@fesch.at>
> Subject: Re: [Rails-spinoffs] a frightfully newbish question about
> dragdrop.js
> To: Eric <ermau88@gmail.com>
> Cc: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <1864AC99-34F4-4C24-8562-2F134DD97476@fesch.at>
> Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
> Hmm, thanks for pointing this out, but the script.aculo.us drag-and-
> drop demo page works perfectly fine for me...?
>
> Am I missing something...?
>
> Thomas
>
>
> Am 19.07.2005 um 23:03 schrieb Eric:
>
>> Thomas,
>>
>> I hope you were tired when you read his message, he said this
>> errors were encountered on YOUR site. "dragdrop demo page on
>> script.aculo.us doesnt drag/drop. and returns these errors"
>> Later he tried it on his own page with a local copy and still had
>> the problem..
>>
>> Eric
>>
>> Thomas Fuchs wrote:
>>> Heya!
>>>
>>> First of all, please don''t link to the scripts on the site
>>> directly, but use your own local copies of the js files.
>>> Please try using the latest SVN trunk version to see if the
>>> problem persists. Also, get the latests prototype.js file.
>>>
>>> btw, i hope to have a script.aculo.us 1.1 release candidate ready
>>> this week (if my time permits), some great new stuff coming :)
>>>
>>> Thomas
>>>
>>> Am 29.06.2005 um 17:59 schrieb The Wyzyrd:
>>>
>>>> Hi folks,
>>>>
>>>> I''m in the process of updating a mostly-server-side
web app to
>>>> 21st century functionality, using the prototype.js etc
packages.
>>>> I''m mostly a server-side PHP guy, so please pardon the
level of
>>>> ignorance about Javascript.
>>>>
>>>> I''m having some strange problems, and right now,
I''m trying to
>>>> localize whether the problems are generic browser-things or
>>>> whether it''s
>>>> my machine (called "the haunted voodoo laptop" by my
coworkers,
>>>> so I''m betting that it''s not REALLY a code
problem)
>>>>
>>>> First: using FireFox 1.0.4/win2k (and previously 1.0.3 - I
>>>> reinstalled it yesterday to see if that helped..) the dragdrop
>>>> demo page on script.aculo.us doesnt drag/drop. and returns
these
>>>> errors - the demo page works well in IE6
>>>> on load :
>>>>
>>>> Error: Event.observe is not a function
>>>> Source File: http://script.aculo.us/scripts/dragdrop.js
>>>> Line: 266
>>>> Error: Element.cleanWhitespace is not a function
>>>> Source File: http://script.aculo.us/scripts/dragdrop.js
>>>> Line: 429
>>>> Error: Element.cleanWhitespace is not a function
>>>> Source File: http://script.aculo.us/scripts/dragdrop.js
>>>> Line: 429
>>>>
>>>> when using the code lifted directly from the pages as a local
>>>> test (local copies of the 3 .js files and the .css file)
>>>> I get the above 3 errors ( pointed at my local copies), plus:
>>>>
>>>> Error: Event is not defined
>>>> Source File: http://localhost/ajaxPING/js/dragdrop.js
>>>> Line: 266
>>>>
>>>> in my limited understanding, Event is a language construct, not
a
>>>> defined object, which makes me believe my system is
>>>> at fault here, but I wanted to check with more knowledgeable
>>>> folks first.
>>>>
>>>> anyone else having any similar strangenesses?
>>>>
>>>> Thanks in advance
>>>> Wyzyrd
>>>> <:)}
>>>>
>>>> _______________________________________________
>>>> Rails-spinoffs mailing list
>>>> Rails-spinoffs@lists.rubyonrails.org
>>>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>>>
>>>
>>> _______________________________________________ Rails-spinoffs
>>> mailing list Rails-spinoffs@lists.rubyonrails.org http://
>>> lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>
>
>
> ------------------------------
>
> Message: 7
> Date: Tue, 19 Jul 2005 18:46:22 -0400
> From: Jesse Andrews <anotherjesse@gmail.com>
> Subject: [Rails-spinoffs] draggables bug(s)
> To: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <8677a6f805071915467cdeacc7@mail.gmail.com>
> Content-Type: text/plain; charset=ISO-8859-1
>
> Loving using draggables/sortables in rails... two small issues though -
>
> First bug: creating a draggable object with a handle in rails:
>
> <%= draggable_element "item_#{item.id}",
:handle=>"myhandle" %>
>
> this generates code like this:
>
> <script type="text/javascript">new
Draggable(''item_7'',
> {handle:myhandle})</script>
>
> *** notice the missing quotes in the associative array around myhandle
> -- simple fix to the javascript helpers for rails adding quotes ;) ***
>
> Second bug:
>
> having a draggable actually use the handle is borked:
>
> new Draggable(''item_7'', {handle:"myhandle"})
>
> this is because:
>
> this.handle = options.handle ? $(options.handle) : this.element;
>
> which is because sortables sends the handle not as a class name but
> the actual element - perhaps it should happen from within the
> draggables by changing that line to
>
> this.handle = options.handle ?
> Element.Class.childrenWith(this.element, options.handle)[0] :
> this.element;
>
> then changing the sortables to send the class name to the draggables
> constructor.
>
> ------
>
> Once those are done it works great thus far :)
>
> Jesse Andrews
>
>
> ------------------------------
>
> Message: 8
> Date: Tue, 19 Jul 2005 21:03:24 -0300
> From: Andrew Kaspick <akaspick@gmail.com>
> Subject: Re: [Rails-spinoffs] Tip Sheet for AJAX
> To: Thomas Fuchs <thomas@fesch.at>
> Cc: rails-spinoffs@lists.rubyonrails.org
> Message-ID: <9b627dae050719170341e2ab97@mail.gmail.com>
> Content-Type: text/plain; charset=ISO-8859-1
>
> Should the fact that a width or height be required in IE be mentioned
> for some of the effects to work? Any of the effects that use the IE
> opacity filter need a width or a height to work properly. A newbie
> could find that information quite helpful I think... and this is who
> this tip sheet is targeting I imagine.
>
> http://www.quirksmode.org/css/opacity.html
>
> Andrew
>
> On 7/17/05, Thomas Fuchs <thomas@fesch.at> wrote:
>> Nice! :)
>>
>> Maybe use some color and borders?
>>
>> Thomas
>>
>> Am 17.07.2005 um 03:35 schrieb Raymond Brigleb:
>>
>> > Hello,
>> >
>> > I''ve updated my PDF "tip sheet" for Ajax and
Rails stuff. Would
>> > again love any feedback of course. I''ll post the final
version next
>> > weekend (I would call this a pre-release).
>> >
>> > I''m thinking it needs to run to two pages, because I
haven''t even
>> > got the drag-and-drop stuff in there yet, and I''ve
completely run
>> > out of room! Anything else it seems to be missing? Hope you like
it!
>> >
>> > http://needmoredesigns.com/public/JavaScriptHelpers-Pre.pdf
>> >
>> > Regards,
>> > Raymond
>> > _______________________________________________
>> > Rails-spinoffs mailing list
>> > Rails-spinoffs@lists.rubyonrails.org
>> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>> >
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>
>
> ------------------------------
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
> End of Rails-spinoffs Digest, Vol 2, Issue 21
> *********************************************