0

i'm trying to build some JQuery UI Selectable demo. Is it possible to know if the user is selecting from left to right or right to left ? I have tried this solution but it's not working

var last_selected_id="first";

$( ".selectable" ).selectable({
    selecting: function(event, ui) {
if(last_selected_id=="first")
{
//first, do nothing
}
else
{
    if(ui.selecting.id>last_selected_id)
    {
    //left to right
       console.log('left to right');
    }
    else
    {
      console.log('right to left');
    }
    last_selected_id = ui.selecting.id;
 },....

The ids are sequentially bigger from left to right

Diogo Mendonça
  • 903
  • 2
  • 12
  • 29

2 Answers2

3

You should use the coordinates of mouse pointer provided by JQuery UI event object.

  var startX;
  var direction;

  $( ".selectable" ).selectable({
    start: function( event, ui ) {
      startX = event.pageX;
      direction = "";
    },
    selecting: function( event, ui ) {
      direction = (event.pageX >= startX) ? "right" : "left";
    }
  });
Julien Seligmann
  • 61
  • 4
0

you're missing 2 statments, one at the beggining saying the ui.selecting.id>0, and the the else if when the ui.selecting.id is lower the the last_element_id this code should work`

if(ui.selecting.id>0)
        {
            if(last_selected_id=="first")
                {
                console.log(last_selected_id);
                }
                else
                {
                    if(ui.selecting.id>last_selected_id)
                    {
                    //left to right
                       direction = "ltr";
                    }else if(ui.selecting.id<last_selected_id){
                    //right to left
                        direction = "rtl";
                    }

                }
                if(ui.selecting.id>0){
                    last_selected_id = ui.selecting.id;             
                }
            }
    },
user3021360
  • 1