#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    17
    Rep Power
    0

    Drag and Drop User Interface


    I am looking to create a web user interface where a canvas is set up and someone can drag and drop boxes into blocks for a schedule.

    So on the right side of the screen it would load a box for each class option and on the left side of the screen would be 5 slots for each period, then you could drag a class into each spot.

    Does anyone know a good tutorial / framework etc. for helping me learn how to set something up like this.

    EDIT: Any other suggestions similar to this type of setup, but with some sort of "snap functionality" would be ideal
    http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html


    Thank you in advance!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    40
    Rep Power
    8
    You need to learn ajax with javascript and how to use div innerhtml from within javascript. You may not get a direct tutorial on this but if you google you will get a lot of information to guide you. You can check w3schools, htmlgoodie for some tutorials on javascript
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    consider jQuery


    I can't see anything in your problem description that calls for AJAX. A javascript framework like YUI will make the functionality much easier to implement than javascript from scratch.

    You might want to consider jQuery's solution.
    http://jqueryui.com/draggable/
    You can probably prototype what you are looking for in minutes rather than hours without a framework. jQuery is a lot more popular than YUI, so you might be able to find help more easily with jQuery. There are also a ton of jQuery books which can help you with the basics. However, jQuery evolved rapidly, so be alert that books (and most web pages) will have some things out of date.

    You might also consider Dojo.
    dojotoolkit.org/reference-guide/1.9/dojo/dnd.html
    It is somewhat popular as a javascript framework (not sure how it compares to YUI). It came in second place when I was evaluating frameworks. It has a really rich library; I think the vendor supplied documentation for Dojo is much better than jQuery (which can be awful at times); it can be pretty lean. But for my needs jQuery supplied some features that Dojo didn't.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    17
    Rep Power
    0
    Originally Posted by EEsterling
    You might want to consider jQuery's solution.
    http://jqueryui.com/draggable/
    This has everything I was looking for. Thank you very much!

IMN logo majestic logo threadwatch logo seochat tools logo