Scriptaculous serialized drag and drop sticky draggable i

General discussion on technical and managerial topics
no avatar
kuku
 
Posts: 2
Joined: Thu May 14, 2009 8:13 pm

Scriptaculous serialized drag and drop sticky draggable i

by kuku » Thu May 14, 2009 8:42 pm

Hi,

I hope someone here can point me into the right direction. I worked on this for weeks and can't find a solution.
I created span boxes which can be filled by dropping words on them. However two things are very bothersome for the user, first the words are sticking to the mouse in Firefox (works fine in Safari). So when a person lets go of the word over a box it doesn't snap to the point, but follows the mouse. It works if the user double clicks. which is very odd. (I included the code used below). Secondly, I would like to only allow the user to drop one item in each box, but I couldn't figure how to. If I change the id or class onUpdate they cannot remove the item at all from the box. I want to give them the ability to change boxes after they made their selection.

I know this sounds complicated. So here is the code if necessary I can provide an example online.


Code: Select all
<div id="page">
   <div class="ex_instr">
       <span id="wordbank" class="section1" >
             <span id="item_1" class="lineitem">One</span>
             <span id="item_2" class="lineitem">Two</span>
             <span id="item_3" class="lineitem">Three</span>
        </span>
   </div>

<table cellpadding="0" cellspacing="0" class="ex_opt">
    <tr>
        <td>
        <p class="dr_par">
        <span id="blank_1" class="section" title="Everything">&nbsp;</span>   
        <span id="blank_2" class="section" title="And">&nbsp;</span>
        <span id="blank_3" class="section" title="That">&nbsp;</span>
        </p>
        </td>
    </tr>
</table>
</div> <!--end div id page-->


<script type="text/javascript" language="javascript">

Sortable.create('wordbank',{tag:'span', dropOnEmpty: true, constraint:true, containment: sections, only:'lineitem'});
Sortable.create('blank_1',{tag:'span',dropOnEmpty: true, constraint:true, containment:sections, only:'lineitem', onUpdate:function(el){changeClass(el);}});
Sortable.create('blank_2',{tag:'span',dropOnEmpty: true, constraint:true, containment:sections, only:'lineitem', onUpdate:function(el){changeClass(el);}});
Sortable.create('blank_3',{tag:'span',dropOnEmpty: true, constraint:true, containment:sections, only:'lineitem', onUpdate:function(el){changeClass(el);}});
Sortable.create('page',{tag:'div',only:'section',handle:'ex_instr'});
</script>


no avatar
kuku
 
Posts: 2
Joined: Thu May 14, 2009 8:13 pm

»

by kuku » Sun May 17, 2009 1:55 am

Nobody?

Return to General Discussion

cron