{"id":747,"date":"2014-09-30T14:15:04","date_gmt":"2014-09-30T14:15:04","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=747"},"modified":"2015-08-17T06:14:48","modified_gmt":"2015-08-17T06:14:48","slug":"how-to-detect-the-item-has-been-dropped-in-the-same-sortable-list-in-jquery-ui","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/how-to-detect-the-item-has-been-dropped-in-the-same-sortable-list-in-jquery-ui\/","title":{"rendered":"How to detect the item has been dropped in the same sortable list in jQuery UI"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My quesiton<\/a> was:<\/p>\n

I have two connected sortable lists. My code works fine for when I drag one element from the list on the left side to the one on the right side, but can you tell me what event should I be looking for if I want to know the order of items in the left list when an item gets dragged and dropped in the same list (basically reorder the items in the same list, not dragging and dropping to the other list but to the same).<\/p>\n

Here is the link to the code:\u00a0http:\/\/jsfiddle.net\/Hitman666\/WEa3g\/1\/<\/a><\/p>\n

So, as you will see I have an alert when items are dragged and dropped in oposite lists, but I need an event also for when the list (for example the green one) gets reordered. Then I would need to alert the order, for example:\u00a04,3,2,1<\/code><\/p>\n

HTML:<\/p>\n

<ul id=\"sortable1\" class=\"connectedSortable\">\r\n    <li>Item 1<\/li>\r\n    <li>Item 2<\/li>\r\n    <li>Item 3<\/li>\r\n    <li>Item 4<\/li>\r\n<\/ul>\r\n\r\n<ul id=\"sortable2\" class=\"connectedSortable\">\r\n    <li>Item 5<\/li>    \r\n    <li>Item 6<\/li>\r\n    <li>Item 7<\/li>\r\n    <li>Item 8<\/li>    \r\n<\/ul><\/pre>\n
CSS:<\/p>\n
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }<\/span>#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }<\/span>#sortable1 li{background: green;}<\/span>#sortable2 li{background: yellow;}<\/span><\/code><\/pre>\n
JavaScript:<\/p>\n
$(function() {\r\n    $(\"#sortable1, #sortable2\").sortable({\r\n        connectWith: \".connectedSortable\",\r\n        receive: myFunc\r\n    }).disableSelection();\r\n\r\n    function myFunc(event, ui) {\r\n        alert(ui.item.html());\r\n    }\r\n});<\/pre>\n
 <\/p>\n
The answer, by user\u00a0yoelp<\/a>\u00a0was:<\/p>\n
\n
You need to use the update event. Here is my example (notice that I made 2 extra function calls to sort since you needed the evt only on the left list):<\/p>\n
$(function(){\r\n    $( \"#sortable1\" ).sortable({\r\n        connectWith: \".connectedSortable\",\r\n        update: myFunc\r\n    }).disableSelection();\r\n\r\n    $( \"#sortable2\" ).sortable({\r\n        connectWith: \".connectedSortable\",  \/\/ deactivate:myFunc\r\n    }).disableSelection();\r\n\r\n    function myFunc(event, ui){\r\n        var b = $(\"#sortable1 li\"); \/\/ array of sorted elems\r\n        for (var i = 0, a = \"\"; i < b.length; i++)\r\n        {\r\n            var j=i+1; \/\/ an increasing num.\r\n            a = a + j + \") \" + $(b[i]).html() + '\\n ' \/\/putting together the items in order\r\n        }\r\n        alert(a)                 \r\n    }\r\n});<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=747"}],"version-history":[{"count":5,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/747\/revisions"}],"predecessor-version":[{"id":2102,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/747\/revisions\/2102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}