www.tutorialspoint.com Forum Index
Register FAQMemberlistUsergroupsTutorials PointLog in
Reply to topic Page 1 of 1
Scriptaculous serialized drag and drop sticky draggable i
Author Message
Reply with quote
Post Scriptaculous serialized drag and drop sticky draggable i 
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:

<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>



View user's profile Send private message
Reply with quote
Post Post Confirmation 
Thanks for your post. This post will be reviewed by webmaster and will be online very soon.!

View user's profile Send private message
Display posts from previous:
Reply to topic Page 1 of 1
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum