www.webdeveloper.com
Results 1 to 5 of 5

Thread: scriptaculous: two drop targets, right pane is sortable

Hybrid View

  1. #1
    Join Date
    Dec 2002
    Location
    charlotte, nc
    Posts
    50

    scriptaculous: two drop targets, right pane is sortable

    Hello. Currently, I have the following javascript.

    Code:
    187 function setDraggables(e) {
    188     var dragObjs = e.getElementsByTagName('li');
    189
    190     for(var x=0; x<dragObjs.length; x++) {
    191         if(dragObjs[x].id)
    192             new Draggable(dragObjs[x].id, {revert: true });
    193     }
    194     dropAdd('current');
    195     dropAdd('available');
    196 }
    197 function moveItem(draggable,droparea) {
    198     Droppables.remove('current');
    199     if (!droparea.cleared) {
    200         droparea.cleared = true;
    201     }
    202     draggable.parentNode.removeChild(draggable);
    203     droparea.appendChild(draggable);
    204     dropAdd('current');
    205     Sortable.create('current', {dropOnEmpty:true});
    206 }
    207 function dropAdd(id) {
    208     Droppables.add(id, {
    209         hoverclass: 'hoverActive',
    210         onDrop: moveItem });
    211     $(id).cleared = false;
    212 }
    and the following html. please ignore the crude ID structure. This is a POC in development.

    Code:
      7     <div id="draggables">
      8         <div class="column left">
      9             <h3>Available groups:</h3>
     10             <ul id="available">
     11                 <li id="a1">group1</li>
     12                 <li id="a2">group2</li>
     13                 <li id="a3">group3</li>
     14                 <li id="a4">group4</li>
     15                 <li id="a5">group5</li>
     16             </ul>
     17         </div>
     18         <div class="column right">
     19             <h3>Your current view:</h3>
     20             <ul id="current">
     21                 <li id="v1">curgroup1</li>
     22                 <li id="v2">curgroup2</li>
     23                 <li id="v3">curgroup3</li>
     24                 <li id="v4">curgroup4</li>
     25                 <li id="v5">curgroup5</li>
     26             </ul>
     27         </div>
     28     </div>
    I'd like to be able to drag items from column A to B and vice versa. Column B, however, should also be sortable.

    It KINDA works. What's not working right now is, you can drag things from left to right, but then if you sort items in column B, you suddenly can't drag things from Column A to Column B any more.

    My understanding is that the line

    Code:
    Sortable.create('current', {dropOnEmpty:true});
    will implicity also call Sortable.destroy if the element has already been declared a "Sortable." -- but i haven't found this to always be the behavior. If I explicity add:

    Code:
    Sortable.destroy('current');
    at the TOP of my "moveItem" function, everything works as desired, but for some reason, re-ordering items on the right is very wonky. Some times the element won't "catch" in its new position and drop to the bottom. Moving things from up to down works fine, but moving things from down to up seems to be problematic (FF3 - I haven't tested in IE).

    dropOnEmpty:true seems to fix this, but seems to lose its "fixing" effect when Sortable.destroy is used.

    Anyone accomplished something similar?

    Thanks,
    dep

  2. #2
    Join Date
    Dec 2002
    Location
    charlotte, nc
    Posts
    50
    As a follow-up, using the .hoverActive class makes it easier to know when you can "drop" an item and have it place correctly. However, this is sometimes a little weird. You have to be fairly precise. Is there a parameter to make this easier? Like assigning "snap" to a Sortable? i can only seem to assign snap to draggables.

    Thanks,
    dep
    Last edited by dep; 04-14-2009 at 06:14 PM.

  3. #3
    Join Date
    Dec 2002
    Location
    charlotte, nc
    Posts
    50
    I was able to resolve this using the ghosting parameters and the hover class stuff.

    Thanks anyway.

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    Proof there's nothing at all wrong with talking to yourself, sometimes it helps!!!

  5. #5
    Join Date
    Dec 2002
    Location
    charlotte, nc
    Posts
    50
    Quote Originally Posted by astupidname View Post
    Proof there's nothing at all wrong with talking to yourself, sometimes it helps!!!
    haha -- indeed. thank you. this forum is valuable, if even for inner monologue. Perhaps someone will stumble upon it and find something of value.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles