{"id":7825,"date":"2015-10-30T07:56:04","date_gmt":"2015-10-30T07:56:04","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/10\/30\/jquery-sortable-select-and-drag-multiple-list-items-open-source-projects-rubaxa-sortable\/"},"modified":"2015-10-30T07:56:04","modified_gmt":"2015-10-30T07:56:04","slug":"jquery-sortable-select-and-drag-multiple-list-items-open-source-projects-rubaxa-sortable","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/10\/30\/jquery-sortable-select-and-drag-multiple-list-items-open-source-projects-rubaxa-sortable\/","title":{"rendered":"jQuery Sortable &#8211; Select and Drag Multiple List Items-open source projects RubaXa\/Sortable"},"content":{"rendered":"<p><strong>tl;dr<\/strong>: Refer to this Fiddle for a working answer.<\/p>\n<p>I looked everywhere for a solution to the issue of <strong>dragging multiple selected items from a sortable into a connected sortable<\/strong>, and these answers were the best I could find.<\/p>\n<p><em>However&#8230;<\/em><\/p>\n<p>The accepted answer is buggy, and <strong>@Shanimal&#8217;s answer is close<\/strong>, but not quite complete. I took @Shanimal&#8217;s code and built on it.<\/p>\n<p>I fixed:<\/p>\n<p>I added:<\/p>\n<ul>\n<li>Proper Ctrl + click (or Cmd + click if on a mac) support for selecting multiple items. Clicking <em>without<\/em> the Ctrl key held down will cause that item selected, and other items in the same list to be <em>deselected<\/em>. This is the same click behavior as the jQuery UI <code>Selectable()<\/code> widget, the difference being that <code>Selectable()<\/code> has a marquee on mousedrag.<\/li>\n<\/ul>\n<p>Fiddle<\/p>\n<p><strong>HTML:<\/strong><\/p>\n<ul>\n<li><code>One<\/code><\/li>\n<li><code>Two<\/code><\/li>\n<li><code>Three<\/code><\/li>\n<\/ul>\n<pre>\n<\/pre>\n<ul>\n<li><code>Four<\/code><\/li>\n<li><code>Five<\/code><\/li>\n<li><code>Six<\/code><\/li>\n<\/ul>\n<pre>\n<\/pre>\n<p><code><strong>JavaScript (with jQuery and jQuery UI):<\/strong><\/code><\/p>\n<pre><code><code>$(\"ul\").on('click', 'li', function (e) {\n    if (e.ctrlKey || e.metaKey) {\n        $(this).toggleClass(\"selected\");\n    } else {\n        $(this).addClass(\"selected\").siblings().removeClass('selected');\n    }\n}).sortable({\n    connectWith: \"ul\",\n    delay: 150, \/\/Needed to prevent accidental drag when trying to select\n    revert: 0,\n    helper: function (e, item) {\n        var helper = $('<\/code><\/code><\/pre>\n<pre>');\n        if (!item.hasClass('selected')) {\n            item.addClass('selected').siblings().removeClass('selected');\n        }\n        var elements = item.parent().children('.selected').clone();\n        item.data('multidrag', elements).siblings('.selected').remove();\n        return helper.append(elements);\n    },\n    stop: function (e, info) {\n        info.item.after(info.item.data('multidrag')).remove();\n    }\n\n});\n<\/pre>\n<p><code><strong>NOTE:<\/strong><\/code><\/p>\n<p><code><em>Since I posted this, I implemented something simmilar - connecting draggable list items to a sortable, with multi-select capability. It is set up almost exactly the same, since jQuery UI widgets are so similar. One UI tip is to make sure you have the <code>delay<\/code> parameter set for the draggables or selectables, so you can click to select multiple items without initiating a drag. Then you construct a helper that <strong>looks<\/strong> like all the selected elements put together (make a new element, clone the selected items, and append them), but <strong>make sure<\/strong> to leave the original item intact (otherwise it screws up the functionality - I cannot say exactly why, but it involves a lot of frustrating DOM Exceptions).<\/em><\/code><\/p>\n<p><em>I also added Shift + Click functionality, so that it functions more like native desktop applications. I might have to start a blog so I can expound on this in greater detail \ud83d\ude42<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>tl;dr: Refer to this Fiddle for a working answer. I looked everywhere for a solution to the issue of dragging multiple selected items from a sortable into a connected sortable, and these answers were the best I could find. However&#8230; The accepted answer is buggy, and @Shanimal&#8217;s answer is close, but not quite complete. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7825","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7825"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7825\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}