CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-selectable
Diogo Mendonça
Diogo Mendonça

Reputation: 923

JqueryUI Selectable direction

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

Upvotes: 0

Views: 182

Answers (2)

Julien Seligmann
Julien Seligmann

Reputation: 61

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";
    }
  });

Upvotes: 3

user3021360
user3021360

Reputation: 1

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;             
                }
            }
    },

Upvotes: 0

Related Questions