CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
user3506890
user3506890

Reputation: 21

jQuery UI.Sortable: Any event to trigger once delay completed

In Jquery UI.Sortable, We can specify delay to start the sort.

I want to know, if there is any event that is triggered once the delay(i.e.,ms) completed.

I tried all events in the API list, start, activate etc. but all the events are triggered when i start to move the item.

I want to trigger an event when i hold (click & hold) the item for n milliseconds.

The requirement is as follows:

set delay of 100ms
click & hold using mouse for less than 100ms, we can't move // That's working fine.
click & hold using mouse for greater than equal to 100ms, we can move. but until we can drag user doesn't know whether the selected item can able to move or not.

So after delay completed, need an intimation for that selected item can view different apart from other items.

Kindly provide any idea to proceed.

Upvotes: 1

Views: 2537

Answers (1)

T J
T J

Reputation: 43156

I think this is a problem with the understanding.

delay -

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.

The item is always draggable, The delay is triggered only after you start dragging. It doesn't start if you click and hold the mouse, so there is no use of indicating the user that item is now draggable once they click and hold mouse because it does nothing.

The delay is set for n milliseconds after you start dragging - And the start event is triggered right after the delay. You can make use of start event to notify the user that the item is now dragging.

For example

<div class="sortable">
  <div class="grabbable"></div>
  <div class="grabbable"></div>
</div>

$('.sortable').sortable({
 delay: 500,
 start: function (e, ui) { // will be triggered after 500ms
    ui.helper.addClass('highlight');
 },
 beforeStop: function (e, ui) {
    ui.helper.removeClass('highlight');
 }
});

Demo

Upvotes: 5

Related Questions