jQuery drag & drop and drag again...

Question

Hi there,

I'm working on a drag & drop page where you can drag elements from a list into various droppable containers. This works perfectly. What I am now trying to achieve is then have the ability to drag these from one container to another (or re-order them inside a container). But I cannot seem to do this.

The list looks like a succession of coloured boxes with titles (each has a class name of '.item'). When you drag from the list it clones it, so that the list stays the same (ie. blocks are not removed).

There are two containers (in this example), with class names of 'dragrow1' and 'dragrow2'. Depending on which row you drag your box into, the block will change appearance. This works as it should. The trouble is getting these boxes to drag again, either inside its own container or another one, and without cloning itself (it needs to move). By the way, the class name changes from '.item' to '.box' after dropping for style reasons. What's nice is as you drag a coloured box into a container, because of the css style applied, each box floats next to each other, so they lay side by side from the top left corner.

My jquery code so far looks like this:

$(document).ready(function(){

  $(".items").draggable({helper: 'clone'});

  $(".dragrow1").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
    }

  });   
  $(".dragrow2").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
    }
  });
});

And an example of the container code looks like this:

<div class="dragbox-content" style="display:block" >
  <div class="dragrow1">&nbsp;</div>
  <div class="dragrow2">&nbsp;</div>
</div>

Can anyone give me any pointers?

Thanks,

Ali.

Answer 1

I found another way, by using draggable with sortable. You can see a separate topic here about it:

http://stackoverflow.com/questions/2095691/jquery-manipulate-dropped-element-in-sortable-list

I didn't figure out how to drag between containers yet because it is not actually a requirement.

Ali.