Sortable with addtional droppable

30 views
Skip to first unread message

JJD

unread,
Jun 14, 2012, 3:53:22 PM6/14/12
to prototype-s...@googlegroups.com
Yes, I'm still using prototype :)

I have a list of thumbnails in a container, and a Sortable created for the container so I can reorder them. 

I also want to add a separate droppable outside the container div to accept imgs I want to trash.

I can't figure out how to get the thumb to drop onto the trash outside of the thumb container. With the code below, the image won't drop until it's release over the original "thumbs" div.

Anyone have any pointers?

HTML (erb):
<div id="thumbs">
  <% @thumbs.each do |thumb| %>
    <img class="crop_img" id="thumb_<%=thumb.id%>"  src="<%=thumb.filename%>" />
  <% end %>
</div>

<div id="crop_trash" style="display: block; width:100px;height:100px;background-color:#CCCCCC">
 Trash
</div>

<script type="text/javascript" >
  //<![CDATA[
  Sortable.new_create('thumbs',
    {
      format:/_(\d*)$/, 
      onUpdate: function(){
        new Ajax.Request('/the/url', 
                         {asynchronous: true,
                          evalScripts: true});
      },
      only: 'crop_img',
      constraint: false,
      containment: ['thumbs','crop_trash'],
      tag: 'img'
    });

    Droppables.add('crop_trash',
      { 
        accept: 'crop_img',
        onDrop: function(drag){
          thumb_handler.delete_thumb(drag.id.substring(drag.id.lastIndexOf('_')+1));
        }
      }
    );
  //]]
</script>


JJD

unread,
Jun 14, 2012, 4:04:02 PM6/14/12
to prototype-s...@googlegroups.com
Whoops. Sorry to waste your time...

The error was in the onDrop callback, thumb_handler.delete_thumb, not the posted code. Carry on as before!

Jason Westbrook

unread,
Jun 14, 2012, 4:16:30 PM6/14/12
to prototype-s...@googlegroups.com

FWIW  there are still plenty of users that are still using Prototype

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com



--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/VDlwjumQ0uQJ.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply all
Reply to author
Forward
0 new messages