How to move an item programmatically with jQuery sortable while still triggering events

0 votes

I am using jQuery Sortable. I have the HTML setup like so:

<ul id='plan'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
  <li class='item'>4</li>
</ul>

I want to programmatically move an <li> to a different position. I can achieve this with the following JS:

$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));

This works fine except it does not trigger the sortable events like change or update. I have a function which is run on the update event of the sortable but moving the li with JS does not trigger this.

Does anyone know how to trigger the sortable update event?

May 29, 2020 in JQuery by kartik
• 37,510 points
3,807 views

1 answer to this question.

0 votes

Hello,

$("selector").trigger("sortupdate");

you will have to  pass as second argument  of a function where to put in the event and the ui, event is not as important as ui

the inside code of the sortable widget for event triggering looks like this

this._trigger("update", event, this._uiHash(this));

So you may want to do following

function triggerUpdateFor(selector) {
    var widget = $(selector).sortable("widget");
    if (widget) widget._trigger("update", null, widget._uiHash(widget));
}

Hope this work!!

answered May 29, 2020 by Niroj
• 82,880 points

Related Questions In JQuery

0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
779 views
0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
3,074 views
0 votes
1 answer

How to insert an item into an array at a specific index?

Hello @kartik, You can implement the Array.insert method by doing ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
1,565 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
3,885 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
22,097 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,741 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,610 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
42,422 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
2,745 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
42,228 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP