Dragging something in JS

M

Martin Rinehart

I have been informed (by informed people) that if I want to drag
something around the screen I should write my own code because the
available stuff is not very good. (That was actually put less kindly
in the originals.)

Is this true? What is wrong with the other stuff? What would
characterize good dragging code?
 
A

ameshkin

I've used scriptaculous and prototype for this, but it doesn't ALWAYS
work well. I've written my own code as well which does seem more
solid.

Other than scriptaculous, and custom js code, I haven't tried anything
else. I would also like to know if there is a better option out there.
 
J

Jeremy J Starcher

I have been informed (by informed people) that if I want to drag
something around the screen I should write my own code because the
available stuff is not very good. (That was actually put less kindly in
the originals.)

Is this true? What is wrong with the other stuff? What would
characterize good dragging code?

A vast majority of Javascript code out there is, to put it kindly, total
crap for one out of three reasons.

1) Using browser sniffing instead of feature detection. There has been
a lot written about the two approaches, I won't repeat it here.

2) Relying on a frame work. The various frame works are all criticized
for different reasons. At absolute BEST they are large and cumbersome.
At worst, they are very delicate on the inside and prone to breaking on
slight browser changes and lack of support for "minor" browsers.

3) Written by inexperienced hands. This is a tough one, because a
novice, trying to write his own code, might not too much better than some
of the stuff out there. I really do understand the desire to simply snag
something that *works* and move on.


I've never written drag code, or I'd share it with you. In all of my
designs, I realized that by the time I made my web page usable on small
screens and print outs, that the drag-code had to go anyways. (My
biggest web page is a parts lookup -- I have people on iphones using this
while crawling over their bikes, ordering parts.)

On the other hand, I couldn't imagine a site like meebo.com working
without some sort of drag code. ;)
 
D

David Mark

I've used scriptaculous and prototype for this, but it doesn't ALWAYS
work well.  I've written my own code as well which does seem more
solid.

It "works" about as well as it always did (which is to say not well.)
150K for a few special effects and mouse position reporting?
Other than scriptaculous, and custom js code, I haven't tried anything
else. I would also like to know if there is a better option out there.

First, get rid of Scriptaculous. It is built on Prototype and anyone
with a choice (and a brain) stopped using that years ago.
 
M

Martin Rinehart

Thanks, all. I've written drag code before, but I'm not sure C++ for
DOS is going to be a big help. What we need is a proper windowing OS
within the browser, but that sounds like it won't happen as a one-man,
spare-time project.

Anybody know what Chrome is going to sprout?
 
M

Michael Wojcik

Martin said:
What we need is a proper windowing OS
within the browser...

Wow. That sounds utterly vile. But perhaps some of us don't need it as
much as others do.

(Would I be able to run my browser in a window in my browser?)

Perhaps this idea would have caught on if a major OS vendor had put it
into their OS around 1995. They could have called it something catchy
like "Active Desktop".
Anybody know what Chrome is going to sprout?

Horns and a pointy tail would be my guess.
 
T

Thomas 'PointedEars' Lahn

Michael said:
Wow. That sounds utterly vile. But perhaps some of us don't need it as
much as others do.

Perhaps a bad choice of words. I think he meant some kind of window manager
for a Web application, which has been written before.
(Would I be able to run my browser in a window in my browser?)

Perhaps this idea would have caught on if a major OS vendor had put it
into their OS around 1995. They could have called it something catchy
like "Active Desktop".

To be fair, Active Desktop is more of a browser within an OS, if you want to
call it that. But doesn't Google Apps sound like what Martin is asking for?
Horns and a pointy tail would be my guess.

I'll see your horns and tails, raise you even more incompatibility.


PointedTai^H^H^HEars
 
R

rf

Martin Rinehart said:
Thanks, all. I've written drag code before, but I'm not sure C++ for
DOS is going to be a big help. What we need is a proper windowing OS
within the browser, but that sounds like it won't happen as a one-man,
spare-time project.

Dragging stuff is a reasonable easy affair. I tinkered this up over at
alt.html in response to somebody who was going to use jQuery to drag stuff.

It is *not* pretty. Making it pretty is up to whoever uses it.
http://barefile.com.au/test/drag.html
 
M

Martin Rinehart

Thomas said:
Perhaps a bad choice of words. I think he meant some kind of window manager
for a Web application, which has been written before.

Exactly. Tkinter would be nice.
 
M

Martin Rinehart

Jorge said:
There are three:

EyeOS: (Spanish !)
http://eyeos.info/?lang=en

YouOS: (deprecated)
http://www.youos.com/

LivelyKernel: (Sun microsystems)
http://research.sun.com/projects/lively/index.xhtml

Started very much excited. Much less so now.

EyeOS is going for a real OS. Bravo and good luck to them but I'd like
enough OS functionality (open window, resize it, move it, max/minimize
it) for application programming. I'm trying to do a <canvas>-specific
paint program and I'm stuck at the color chooser because of no basic
window functionality.

YouOS closed by its developers at release 0.1, the home page sadly
reports.

LivelyKernel? Lively only in name. It's a slug on my PC and it's non-
standard. How about minimize, maximize and close buttons in the upper-
right where they're expected?

Thanks anyway.
 
M

Martin Rinehart

Would you wits please take a moment to ask what Chrome is all about.
Google's up to something and having a browser that they control is
part of what they're up to. (At least so far, all my stuff that runs
on Firefox has run without issues on Chrome.)

I suspect that the lack of the capabilities I want is part of where
they see opportunity. Python/Tkinter as a client-side scripting
language would be very interesting, no? Or JavaScript with Tkinter
capability would be another way to go.
 
D

David Mark

Started very much excited. Much less so now.

Not surprising.
EyeOS is going for a real OS. Bravo and good luck to them but I'd like

Clearly not appropriate for your needs. Also, the client side code is
voodoo. I see this pattern over and over:

el.setAttribute('id', 'myid');

Yes, things like this is also consistently spotted:

el.className = 'myclass';

Obviously the author is copying and pasting code without the slightest
idea of the ramifications (perhaps he heard that setting the ID had to
be done with setAttribute?)

Took ten years to load and a quick glance at Firebug reveals this gem:

// A esta funcion se le pasa un objeto UL y lo convierte a arbol
function processList(ul) {
if (!ul.childNodes || ul.childNodes.length==0) { return; }

La primera salida es mala forma. Y la característica repetitiva de
pruebas es ridículo en un marco como este.

// Iterate LIs
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {

Esto es horriblemente ineficiente.

var item = ul.childNodes[itemi];
if (item.nodeName == "LI") {

No hay ninguna garantía de que el nodeName existe una propiedad (o el
regreso mayúsculas.)

// Iterate things in this LI
var subLists = false;
for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {

Esto también es horriblemente ineficiente.

var sitem = item.childNodes[sitemi];
if (sitem.nodeName=="UL") {

Véase más arriba.

subLists = true;
processList(sitem);

El uso de la recursividad aquí es ridículo.

}
}
var s= document.createElement("SPAN");
var t= '\u00A0'; // &nbsp;
s.className = nodeLinkClass;
if (subLists) {
// This LI has UL's in it, so it's a +/- node

A qué nodo?

if (item.className==null || item.className=="") {

Esta prueba es muy estúpido.

item.className = nodeClosedClass;
}
// If it's just text, make the text work as the link also
if (item.firstChild.nodeName=="#text") {

Esto es indignante.

t = t+item.firstChild.nodeValue;
item.removeChild(item.firstChild);
}
s.onclick = function () {
this.parentNode.className =
(this.parentNode.className==nodeOpenClass) ? nodeClosedClass :
nodeOpenClass;
return false;
}
}
else {
// No sublists, so it's just a bullet node
item.className = nodeBulletClass;
s.onclick = function () { return false; }
}
s.appendChild(document.createTextNode(t));
item.insertBefore(s,item.firstChild);
}
}

Esto fugas de memoria en IE debido a la circular de referencia.

}

Este proyecto está condenado al fracaso (evitar como la peste.)

Suffice to say that Javascript incompetence crosses all borders.
enough OS functionality (open window, resize it, move it, max/minimize

And this is for a color picker? What makes you think you need to
resize or move it? Just put it next to the canvas with a close
button. When it closes, enable a button to re-show it. Problem
solved.
it) for application programming. I'm trying to do a <canvas>-specific
paint program and I'm stuck at the color chooser because of no basic
window functionality.

You are stuck because you aren't thinking about alternate designs.
YouOS closed by its developers at release 0.1, the home page sadly
reports.

That is a shame.
LivelyKernel? Lively only in name. It's a slug on my PC and it's non-
standard. How about minimize, maximize and close buttons in the upper-
right where they're expected?

More of what you don't need.
 
R

rf

Martin Rinehart said:
That's the basic idea, but you can trick it. Move mouse too, fast.
Mouse up outside the draggable. Now you're dragging without a
mouseDown.

You snipped the important bit:
"It is *not* pretty. Making it pretty is up to whoever uses it."

Solving the problems you see is part of making it pretty.

Hint: Many of them go away if the mousemove and mouseup handlers are
attached to the document. See the above link again and *don't* tell me that
you can drag the div outside the browser window. I know you can but stopping
that is also part of making it pretty. Applying a required sidestep to stop
IE doing something silly is also part of making it pretty.

In answer to your original question: yes if you want to drag someting around
the screen you should write your own code. Code written by somebody else
will invariably not exactly suit your situation. Plus, as you can see
dragging something around is not rocket science. A few dozen lines of code.

I have a fully fledged drag system that does exactly what I need. No, I
won't give it to you because 1) it does not do exactly what you need, 2) if
you write one yourself you will understand what you wrote and why you wrote
it and 3) most of it you already have. The complete code is only about twice
as big as that in the link above. I *will* help you with yours if I see a
bit of effort on your part to extend what you already have at the above
link.

Then again you seem to not even want to write your own dragging code.
 
M

Martin Rinehart

David said:
You are stuck because you aren't thinking about alternate designs.

You're right, but do you recall what Shaw wrote about "reasonable men"
in Major Barbara?

I am also stuck because I wrote one in Java:

http://www.martinrinehart.com/examples/color-chooser.html

and I liked it. Trying to do the same, but add 'recent choices'
palette. Really not convinced that some minimal windowing
functionality should be too much to ask in 2008.
 
M

Martin Rinehart

rf said:
Then again you seem to not even want to write your own dragging code.

You couldn't be more correct. I will write my own code but I sure as
hell don't want to.

Martin
 
D

David Mark

You're right, but do you recall what Shaw wrote about "reasonable men"
in Major Barbara?

Uh, no.

And what does that have to do with it?
and I liked it. Trying to do the same, but add 'recent choices'
palette. Really not convinced that some minimal windowing
functionality should be too much to ask in 2008.

It's not. ISTM you need need to learn cookies and mouse position
reporting (in that order.) You should be able to write this in an
evening. If you can't, perhaps you should skip the drag and drop part
(never mind what you did in Java.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,056
Latest member
GlycogenSupporthealth

Latest Threads

Top