Outstandingly excellent javascript drag-and-drop tutorial with working code [JavaScript]

Prev: Outstandingly excellent JS drag-and-drop tutorial with working code
Next: Number list to display in the slide show

From: Thomas 'PointedEars' Lahn on 28 Jun 2010 07:16

RobG wrote:

> The code in the article has a $() function that simply calls
> document.getElementById() and is used precisely once. So to save
> typing 22 characters, the author wrote a function of 53 characters
> and spaces (plus a bunch more for the comment). Consider using
> instead:
>
> var $ = document.getElementById;
>
> within the scope it is required. No global "$", no extra function
> call, far fewer characters to transmit and exactly (more or less) the
> same functionality.

It does not work as you suggest because the calling object would not be that
referred to by `document' anymore, but the Global Object. As a result, at
least MSHTML would throw an exception. I had to observe that when writing
JSX:dhtml.js years ago and I presume it still holds true. So a wrapper is
required if you want an alias for this, but it should have a better, self-
descriptive identifier (like `dom.getEBI' etc. in JSX:dhtml.js). Since then
this method included also feature testing for the MSHTML 4 and NS 4 DOMs,
but it would appear that these can either be safely discarded in the near
future or moved to compatibility libraries.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>

From: pete on 30 Jun 2010 07:28

On Jun 27, 10:50 pm, RobG <rg...(a)iinet.net.au> wrote:
> On Jun 28, 4:25 am, pete <pete...(a)yahoo.com> wrote:

First of all, thank you so much, RobG, for your deep insights and your
thorough answers, and especially the references. I'll study this very
helpful stuff this morning and I'll hope to be a better JS programmer
by lunchtime. This is great!

> look ma, no globals.

And all this time I thought we'd have to wait for Intel's new iESP
chipset :-)

> The code has basic drag functionality, but no "drop" functionality as
> would be expected by a javascript developer looking for a drag-n-
> *drop* tutorial.

Drop is kind of buried. It's realized in the OnMouseUp(e) event-
handler function in the linked article:

http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

about two-thirds of the way down, just before the heading "Utility
Functions."

> Likely the author learned a lot in writing the article, but his education
> is not complete (and likely never will be in regard to javascript).

Sorry, I don't quite get this. Are you telling the plight of many/most
JS programmers?

Thanks again, RobG. Very helpful.

-- pete

Where is the notification to other elements that a
> dragged element has just been dropped on them? Or passed over/under/
> through them?
>
> > 3. one doesn't have the know-how to implement such code from scratch;
> > and
>
> From the article, they are still ignorant about the dropping bit.
>
> > 4. one has been discouraged by the opacity of earlier d-n-d tutorials;
> > and
> > 5. one can put up with the putative shortcomings that Pointed Ears
> > rags on above
>
> And the lack of half the claimed functionality.
>
> If you want comments on an article, it is best to simply ask for a
> review.
>
> There must have been thousands of similar articles written over the
> years, there is probably far more benefit to the author in writing
> them than to the reader in reading them. Likely the author learned a
> lot in writing the article, but his education is not complete (and
> likely never will be in regard to javascript).
>
> --
> Rob

From: pete on 30 Jun 2010 07:34

From: Thomas 'PointedEars' Lahn on 30 Jun 2010 19:07

pete wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Prototype.js was written by people who don't know javascript for people
>> who don't know javascript. People who don't know javascript are not
>> the best source of advice on designing systems that use javascript.
>> -- Richard Cornford, cljs, <f806at$ail$1$8300d...(a)news.demon.co.uk>
>
> Prototype.js comes in for a lot of scorn these days, maybe with good
> reason. I've no idea about Prototype because posts in this group and
> elsewhere have warned me off it.
>
> I hope you'll stop harping on this issue. [...]

You do know what a signature is, don't you? Rest assured I'll keep it at
least as long as what I quote there remains true.

PointedEars, murmuring "it must be the heat ..."
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

From: RobG on 30 Jun 2010 22:07

On Jun 30, 9:34 pm, pete <pete...(a)yahoo.com> wrote:
> On Jun 27, 10:50 pm, RobG <rg...(a)iinet.net.au> wrote:
[...]
> > The code has basic drag functionality, but no "drop" functionality as
> > would be expected by a javascript developer looking for a drag-n-
> > *drop* tutorial.
>
> Drop is kind of buried. It's realized in the OnMouseUp(e) event-
> handler function in the linked article:

That function is more of a "dragging has stopped" function, it doesn't
provide any hooks to allow a user (developer) to do thinks like add
functions to call when dragging has stopped or identify if the dragged
element has been dropped over a drop target, and so on.

[...]
> > Likely the author learned a lot in writing the article, but his education
> > is not complete (and likely never will be in regard to javascript).
>
> Sorry, I don't quite get this. Are you telling the plight of many/most
> JS programmers?

I'm not sure I'd call it a plight, more a condition. Javascript is a
constantly moving target, even if the underlying language and public
specifications like the W3C DOM stuff stood still, there are new
browsers coming out all the time with bigger, better, faster
implementations.

So it is the plight of anyone interested in writing javascript if
their objective is anything other than short term support for a small
number of current browsers.

Writing an article requires the author to study aspects of the topic
that they hadn't thought of before (often because of "dumb" questions
by novice readers - the kind that quickly expose the depth of the
authors knowledge), or thought they knew thoroughly but realised they
didn't. The process of researching and writing a lucid article is a
great learning experience and I suspect a reason why written
assignments are highly regarded as a teaching tool.

It is probably also one reason why blogs are so popular - the authors
benefit as much as, or more than, the readers.

--
Rob

First | Prev | Next | Last
Pages: 1 2 3
Prev: Outstandingly excellent JS drag-and-drop tutorial with working code
Next: Number list to display in the slide show