Question

I want to use a drag to select feature, but rather than select a square area on screen, and select anything within that square, I want to select any element between my initial choice and the one I release the click on.

This is best explained visually. I do not want to do this:

Instead I want to do this:

Answer 1

After the previous failed attempt I’ve now come up with a working solution. It would appear that jQuery UI selectable is not suitable, as it uses that rectangular selection, so I’ve had to roll my own.

In the example below (see jsFiddle for full code), the selectable elements are a.date. These elements should have position: relative set.

Firstly, I append a child element with class .drag-proxy. This is positioned absolutely, and covers the same area as the child. It’s got no content so it sits transparently above.

These proxy elements are made draggable and droppable.

When the element is dragged and dropped onto another element, it is moved back to its starting point (so that subsequent selections work).

Then we cycle through all the proxy elements, indentifying the elements in the selection range, and then setting a class on the parent a.date element.

$(function() {
  $('a.date').each(function() {
  $(this).append('<a href="' + $(this).attr('href') + '" class="drag-proxy" id="proxy_' + $(this).attr('id') + '"></a>');
  });

  var $currentlyDragged;

  $('.drag-proxy').draggable({
    start: function() {
      $currentlyDragged = $(this);
    },
    // Once drag has finished, return the drag-proxy to its original position
    stop: function() { 
      $(this).css('top', 0).css('left', 0);
      $currentlyDragged = null;
    }
  });

  $('.drag-proxy').droppable({
    over: function(e, ui) {
      var from_id = $currentlyDragged.attr('id');
      var to_id = $(this).attr('id');

      $('.date').removeClass('selected');

      var started = selecting = false;
      $('.drag-proxy').each(function() {
        var $this = $(this);
        var this_id = $this.attr('id');
        if (started === false && (this_id == from_id || this_id == to_id)) {
          selecting = true;
        }
        if (selecting) {
          $this.parent().addClass('selected');
          if (started === true && (this_id == from_id || this_id == to_id)) {
            selecting = false;
          }
        }
        if (started === false && (this_id == from_id || this_id == to_id)) {
          started = true;
        }
      });
    },

    drop: function(e, ui) {
      // do whatever you need to do once selection ends
    }
  });


});
​

See the jsFiddle for the full example.