1

I have some div in my page that when an user drags one of them to left, the div would fade out.

My question is:

How can I be able to detect when the users drags to the left or to the right direction?

Unheilig
  • 16,196
  • 193
  • 68
  • 98
user3001854
  • 55
  • 7

1 Answers1

0

You must add this inside droppable init, inside drop param function.

I dont know sencha-touch, but his logic looks really, really ugly.

JSFiddle

if($(ui.helper).hasClass('ui-draggable')){
//draggable item

    if(ui.position.left < 0){

        alert('Draggable dragged to left');
    }
    else if(ui.position.left > 0){

       alert('Draggable dragged to right'); 
    }

    if(ui.position.top < 0){

        alert('Draggable dragged to top');
    }
    else if(ui.position.top > 0){

       alert('Draggable dragged to bottom'); 
    }
}
else{
//sortable item

    var originalPosition = ui.helper.data().sortableItem.originalPosition;

    if(ui.position.left < originalPosition.left){

        alert('Draggable dragged to left');
    }
    else if(ui.position.left > originalPosition.left){

       alert('Draggable dragged to right'); 
    }

    if(ui.position.top < originalPosition.top){

        alert('Draggable dragged to top');
    }
    else if(ui.position.top > originalPosition.top){

       alert('Draggable dragged to bottom'); 
    }
}
Mateusz Mania
  • 839
  • 4
  • 15
  • sorry,can you give me an example – user3001854 Mar 08 '15 at 00:44
  • You want know element was dropped to right of start position, or was dropped on right side of red box? – Mateusz Mania Mar 08 '15 at 01:07
  • Sortable and draggable elements? – Mateusz Mania Mar 08 '15 at 01:39
  • http://jsfiddle.net/tYfNb/63/ sencha-touch have really odd logic. Param `position` of event variable is different by type of draggable element. Draggable element `position` returns different types of values, from difference of start position to dragging-off position, to current position which must be calculated with additional param - `ui.helper.data().sortableItem.originalPosition`. I have spent many time for this, this is really ugly logic. But i hope i helped You. – Mateusz Mania Mar 08 '15 at 01:58