Dragging something in JS

Discussion in 'Javascript' started by Martin Rinehart, Nov 20, 2008.

  1. 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?
    Martin Rinehart, Nov 20, 2008
    #1
    1. Advertising

  2. Martin Rinehart

    ameshkin Guest

    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.
    ameshkin, Nov 20, 2008
    #2
    1. Advertising

  3. On Thu, 20 Nov 2008 11:22:51 -0800, Martin Rinehart wrote:

    > 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. ;)
    Jeremy J Starcher, Nov 20, 2008
    #3
  4. Martin Rinehart

    David Mark Guest

    On Nov 20, 2:32 pm, ameshkin <> wrote:
    > 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.
    David Mark, Nov 20, 2008
    #4
  5. 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?
    Martin Rinehart, Nov 21, 2008
    #5
  6. Martin Rinehart wrote:
    > 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.

    --
    Michael Wojcik
    Micro Focus
    Rhetoric & Writing, Michigan State University
    Michael Wojcik, Nov 21, 2008
    #6
  7. Martin Rinehart

    Jorge Guest

    Jorge, Nov 21, 2008
    #7
  8. Martin Rinehart

    Jorge Guest

    On Nov 21, 7:35 pm, Michael Wojcik <> wrote:
    > (...)
    > (Would I be able to run my browser in a window in my browser?)
    > (...)


    Yes, that's possible, you can try it in EyeOS...

    --
    Jorge.
    Jorge, Nov 21, 2008
    #8
  9. Michael Wojcik wrote:
    > Martin Rinehart wrote:
    >> 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.


    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?

    >> Anybody know what Chrome is going to sprout?

    >
    > 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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
    Thomas 'PointedEars' Lahn, Nov 21, 2008
    #9
  10. Martin Rinehart

    rf Guest

    "Martin Rinehart" <> wrote in message
    news:...
    > 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
    rf, Nov 21, 2008
    #10
  11. Thomas 'PointedEars' Lahn wrote:
    > 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.
    Martin Rinehart, Nov 22, 2008
    #11
  12. rf wrote:
    > 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.


    > http://barefile.com.au/test/drag.html


    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.
    Martin Rinehart, Nov 22, 2008
    #12
  13. Martin Rinehart

    David Mark Guest

    On Nov 22, 3:52 pm, Martin Rinehart <> wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > > 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.


    As in TK? Based on my experiences with *that*, it would not be nice.
    David Mark, Nov 22, 2008
    #13
  14. Jorge wrote:
    >
    > 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.
    Martin Rinehart, Nov 22, 2008
    #14
  15. 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.
    Martin Rinehart, Nov 22, 2008
    #15
  16. Martin Rinehart

    David Mark Guest

    On Nov 22, 4:48 pm, Martin Rinehart <> wrote:
    > Jorge wrote:
    >
    > > 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.


    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.
    David Mark, Nov 22, 2008
    #16
  17. Martin Rinehart

    rf Guest

    "Martin Rinehart" <> wrote in message
    news:...
    > rf wrote:
    >> 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.

    >
    >> http://barefile.com.au/test/drag.html

    >
    > 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.
    rf, Nov 23, 2008
    #17
  18. David Mark wrote:

    > 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.
    Martin Rinehart, Nov 23, 2008
    #18
  19. rf wrote:

    > 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
    Martin Rinehart, Nov 23, 2008
    #19
  20. Martin Rinehart

    David Mark Guest

    On Nov 23, 11:51 am, Martin Rinehart <> wrote:
    > David Mark wrote:
    > > 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?


    Uh, no.

    >
    > I am also stuck because I wrote one in Java:
    >
    > http://www.martinrinehart.com/examples/color-chooser.html


    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.)
    David Mark, Nov 23, 2008
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Q2hyaXMgU3Rld2FydA==?=

    dragging images

    =?Utf-8?B?Q2hyaXMgU3Rld2FydA==?=, May 12, 2005, in forum: ASP .Net
    Replies:
    6
    Views:
    527
  2. =?Utf-8?B?SmltIEhlYXZleQ==?=

    Debugger Dragging

    =?Utf-8?B?SmltIEhlYXZleQ==?=, Aug 15, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    345
    =?Utf-8?B?SmltIEhlYXZleQ==?=
    Aug 15, 2005
  3. Wolfgang
    Replies:
    2
    Views:
    806
    S Manohar
    Feb 1, 2004
  4. =?Utf-8?B?TWlzdGVyRWRUWA==?=

    Error When Dragging Control From Tool Box to Web Form - Memory Err

    =?Utf-8?B?TWlzdGVyRWRUWA==?=, Jun 16, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    354
    =?Utf-8?B?TWlzdGVyRWRUWA==?=
    Jun 16, 2006
  5. =?Utf-8?B?QW1v?=

    Dragging selected item from a listbox onto a table

    =?Utf-8?B?QW1v?=, Jul 9, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    369
    =?Utf-8?B?QW1v?=
    Jul 9, 2006
Loading...

Share This Page