One draggable, two droppables (one being a sortable)

Question

I have read a ton of posts here and elsewhere on the web and I can't quite find a solution that works for my situation.

I have two divs that are set as droppables. #imgBrowser contains a set of images that are populated dynamically via AJAX. Once that AJAX call returns, it fires a function that sets up the images as draggables and the two divs (#imgBrowser and #imgQueue) as droppables and #imgQueue also as a sortable.

The user can drag the images back and forth between the two divs. I have this working flawlessly. But, the functionality I want to add is for #imgQueue to also be sortable.

Here's my code thus far:

function setUpSelectorDraggables(){
    $( "#imgBrowser > .imgTile" ).draggable({
          revert: "invalid",
          containment: 'window',
          scroll: false,
          helper: "clone",
          appendTo: 'body',
          cursor: "move"
        });

    $("#imgQueue")
        .sortable()
        .droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              addIMGtoQueue( ui.draggable );
          }
        });

    $( "#imgBrowser" ).droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              removeIMGfromQueue( ui.draggable );
          }
        });

    return false;   
}

The two support functions:

function addIMGtoQueue($item){
    $item.fadeOut(function() {
        $item.appendTo( "#imgQueue" ).fadeIn(function() {
          $item
            .animate({ width: "40px", height: "40px" })
            .find( "img" )
              .animate({ height: "42px", width: "42px" });
        });
      });

    return false;   
}

function removeIMGfromQueue($item){
    $item.fadeOut(function() {
        $item
          .css( "height", "150px").css( "width", "150px")
          .find( "img" )
            .css( "height", "150px" ).css( "width", "150px" )
          .end()
          .appendTo( "#imgBrowser" )
          .fadeIn();
      });

    return false;   
}

And the simple html:

<div id="imgSelectionArea">
    <div id="galleryAlbumList"></div>
    <div id="imgBrowserContainer">
       <div class="albumNameHeader">
          <div class="albumNameArea">&lt;---Choose an Album</div>
       </div>
       <div id="imgBrowser" class="droppableNormal"></div>
    </div>
</div>
<div style="clear:both;"></div>
<div id="imgQueue" class="droppableNormal"></div>

The problem I have is that the draggable/droppable overrides the sortable when trying to sort the #imgQueue. Which I guess if the sortable were overriding the draggable, then that would be a problem if I wanted to drag back to the #imgBrowser. Is what I'm trying to do even possible?

Thanks! Matt

score 0 · Answer 1 · answered Mar 05 '13 at 15:42

0

If you use Jquery sortable, you can then add a property of connectWith: '.div1, .div2'

So essentially you have three sortable containers but can disable sortable on any you don't wish to be sortable

answered Mar 05 '13 at 15:42

Tim Webster

9,158
8
27
30

I ran across something earlier where someone had used all sortables. There was some functionality that was missing that I liked about using the draggables/droppables instead. But, I've read so many things today and written so much other code that I have completely forgotten why I dismissed using purely sortables. It's been a long day. :-D Do you know of any working examples of using sortables to accomplish something similar? – Mattaton Mar 06 '13 at 03:29
I am trying yo get this working with only sortables and it's going pretty miserably. I can't figure out how to make #imgBrowser not sortable while still leaving its contents able to be dropped in #imgQueue. If I disable #imgBrowser, I can't drag anything into #imgQueue. – Mattaton Mar 07 '13 at 15:25

One draggable, two droppables (one being a sortable)

1 Answers1