Re: 7 new messages in 7 topics - digest

[Hugh Bothwell]

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

[david]

Hi Hugh,

> 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 you should use a div (which could look like a button) instead
of a button. Then when the user drop that element, you could execute
the onDrop callback in the droppable class. This event could be used
to create the question and update the droppable container accordingly.
The ghost effect could also be used, so the "button" will return at
it's original position.

[david]

Hi Hugh,

I think TJ is right , because I have an answer for you :((
If it is not what you attempt, then post a reply to explain what you
want and we can go forward step by step !!

For your problem, if you have a *LIVE* exemple that could probably
help, because the code you give us is a template without any JS and
it's harder to debug :)

So reply if I'm wrong in my answer.

--
david