I've been using Scriptaculous for something like two weeks now and
really like it.  I've written a survey-building page in
PHP+Smarty+Prototype/Scriptaculous; it works using Ajax or fails over
correctly using static HTML and server-side code.  I've got a
draggable question-type palette and a sortable list of editable
questions; source looks something like

=== editsurvey.tpl ===

<div id="palette" class="DragMe">
  <form method="post" action="{$thisurl}">
    <input type="hidden" name="sid" value="{$sid}"/> (* id# of current survey *)
    <input type="hidden" name="action" value="addq"/>

    <ul id="AddQMenu">
      <li><input type="submit" id="addq_essay" class="AddQ"
name="addq_essay" value="Add Essay Q"/></li>
      <li><input type="submit" id="addq_pickone" class="AddQ"
name="addq_pick_one" value="Add Pick-One Q"/></li>
      <li><input type="submit" id="addq_pickmulti" class="AddQ"
name="addq_pickmulti" value="Add Pick-Multi Q"/></li>
    </ul>
  </form>
</div>

<div id="mainbody">
  <ul id="questionlist" class="SortMe">
{foreach from=$questions item=q}
  (* the contents of this loop are actually included from a separate
      template; when the parent script is called by AJAX, it parses the
      template and returns the HTML for a single LI element *)
    <li id="q_{$q.id}">  (* id is the primary key to the database
Question table *)
      <form method="post" action="{$thisurl}">
        <input type="hidden" name="action" value="upd"/>
        <input type="hidden" name="sid" value="{$sid}"/>
        <input type="hidden" name="qid" value="{$q.id}"/>

        <input type="text" id="q_{$sid}_{$q.id}_question"
class="EditMe" name="question" value="{$q.question}"/>
        <input type="text" id="q_{$sid}_{$q.id}_options"
class="EditMe" name="options" value="{$q.options}"/>
        <noscript>
          <input type="submit" value="Save Change"/>
        </noscript>
      </form>
      <noscript>
        <form method="post" action="{$thisurl}">
          <input type="hidden" name="sid" value="{$sid}"/>
          <input type="hidden" name="qid" value="{$q.id}"/>
          <input type="hidden" name="action" value="seq"/>
          <input type="submit" name="up" value="Up"/>
          <input type="submit" name="down" value="Down"/>
        </form>
      </noscript>
    </li>
{/foreach}
  </ul>
</div>

and I use Event.observe(window, 'load', fn(){} ) to attach behaviors
by class, parsing parameters from each object's id. When I click on an
AddQ button, it inserts a new question at the foot of questionlist; I
can then drag it up or down in the list to where I want it.

Now for my question:

I would *like* to be able to drag-click an AddQ button and be able to
drag the new question directly to where I want it; but I haven't been
able to figure out how to go about this.  If I make the palette list
sortable, I can drag the add-question button directly into the
question-list; but then it's (a) a button, not a question, and (b) no
longer in the palette list.  I've been looking at the Sortable
ghosting option; it sounds like it would solve (b) but not (a), and I
don't really want users to be able to reorder the palette either.

I think what I need to do is to create a new question that is already
in the process of being dragged; but I haven't been able to figure out
how to do that, either. Suggestions?  Is there a better way to do
this?  Anyone got sample code that does this?

Thanks in advance!

Hugh Bothwell

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to