Loading ...
Sorry, an error occurred while loading the content.
 

drag&drop give me some directions, please

Expand Messages
  • franki
    Hi all, I m new and I have not much expierience with YUI. I m trying to build custom map engine - for displaying map in web. I know that there are google maps,
    Message 1 of 2 , Dec 3, 2007
      Hi all,

      I'm new and I have not much expierience with YUI.
      I'm trying to build custom map engine - for displaying map in web. I know that
      there are google maps, but the maps that I have google does not have. So I
      have simply 200px wide 200px height pictures with <map area> html tags for
      each picture. On these <areas> there are defined mouse events for different
      kind of objects on the map.
      18 pictures divided in 3 lines create some map view. These pictures have to
      move together, so at first I did one big DIV little bigger than the viewPort
      in document, and I use YAHOO.util.DD("that_div")
      Inside big DIV i put 18 smaller divs each with picture.
      I did YAHOO.extend(YAHOO.example.DDview, YAHOO.util.DD, {....
      and on endDrag I calculate how much pictures were moved, and then rewrite 18
      smaller divs, set new "style.top" "style.left" for big DIV, do innerHTML for
      big DIV with new 18 divs for pictures inside and it works. But there are two
      problems:
      1. Picture blink after I endDrag because all content of the big DIV has
      changed
      2. New pictures are downloaded after endDrag, because only after endDrag I
      create new divs with new <img src> tags and then write them to document

      So on second thought I did 18 small divs without big one. I did the same thing
      with extend util.DD and now after my map_init() i have array with all 18 divs
      saved as html object, their x and y position, and some other index number and
      so one.
      During onDrag fired with onmousemove I change (in for loop) each object
      style.top and style.left as much as calculated from equation (e.pageX-lastX)
      and (e.pageY-lastY). When divs leave viewport I create new divs (inside
      onDrag) with overlay=new YAHOO.widget.Overlay(.... and it works.
      Picture doesnt blink because only new pices are rendered on to the document
      and they are rendered and picture is downloaded during the drag.
      But there is also problem when I have more than 18 pictures, everything
      slowes down very much, with 36 divs to position movement is not smooth and
      that very not acceptable.

      So is there better way to force this 18 pictures move as one wherever I
      click, and new divs will be created on the fly during the drag? Or maybe this
      is the way, but I should unreg (or something like this) divs that are outside
      viewPort to keep my array with as little divs as possible?
      Or any other optimization ideas - maybe different arrays?
      Move should be smooth and I need some additional cpu cycles for other things
      like checking if map limit is exceeded - then I have to setXConstraint and
      setYConstraint to keep map in viewPort.


      greetings
      franki
    • dav.glass@yahoo.com
      franki -- Can you post a code example? If you don t want to post it to the list, email it to me off list & I will see what I can do to help out.. Dav Dav Glass
      Message 2 of 2 , Dec 3, 2007
        franki --

        Can you post a code example? If you don't want to post it to the list, email it to me off list & I will see what I can do to help out..

        Dav
         
        Dav Glass
        dav.glass@...
        blog.davglass.com
         
         
        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: franki <franki@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Monday, December 3, 2007 1:10:00 PM
        Subject: [ydn-javascript] drag&drop give me some directions, please

        Hi all,

        I'm new and I have not much expierience with YUI.
        I'm trying to build custom map engine - for displaying map in web. I know that
        there are google maps, but the maps that I have google does not have. So I
        have simply 200px wide 200px height pictures with <map area> html tags for
        each picture. On these <areas> there are defined mouse events for different
        kind of objects on the map.
            18 pictures divided in 3 lines create some map view. These pictures have to
        move together, so at first I did one big DIV little bigger than the viewPort
        in document, and I use YAHOO.util.DD("that_div")
            Inside big DIV i put 18 smaller divs each with picture.
        I did  YAHOO.extend(YAHOO.example.DDview, YAHOO.util.DD, {....
        and on endDrag I calculate how much pictures were moved, and then rewrite 18
        smaller divs, set new "style.top" "style.left" for big DIV, do innerHTML for
        big DIV with new 18 divs for pictures inside and it works. But there are two
        problems:
        1. Picture blink after I endDrag because all content of the big DIV has
        changed
        2. New pictures are downloaded after endDrag, because only after endDrag I
        create new divs with new <img src> tags and then write them to document

        So on second thought I did 18 small divs without big one. I did the same thing
        with extend util.DD and now after my map_init() i have array with all 18 divs
        saved as html object, their x and y position, and some other index number and
        so one.
            During onDrag fired with onmousemove I change (in for loop) each object
        style.top and style.left as much as calculated from equation (e.pageX-lastX)
        and (e.pageY-lastY). When divs leave viewport I create new divs (inside
        onDrag)  with overlay=new YAHOO.widget.Overlay(.... and it works.
        Picture doesnt blink because only new pices are rendered on to the document
        and they are rendered and picture is downloaded during the drag.
            But there is also problem when I have more than 18 pictures, everything
        slowes down very much, with 36 divs to position movement is not smooth and
        that very not acceptable.

            So is there better way to force this 18 pictures move as one wherever I
        click, and new divs will be created on the fly during the drag? Or maybe this
        is the way, but I should unreg (or something like this) divs that are outside
        viewPort to keep my array with as little divs as possible?
        Or any other optimization ideas - maybe different arrays?
        Move should be smooth and I need some additional cpu cycles for other things
        like checking if map limit is exceeded - then I have to  setXConstraint and
        setYConstraint to keep map in viewPort.


        greetings
        franki



        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com

        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/


      Your message has been successfully submitted and would be delivered to recipients shortly.