Jquery Sortable with one and multiple Element

Question

I have to implement sortable functionality for selected element . The whole scenario is as follows :-

$("#sortable").sortable({
  revert: true,
  stop: function(event, ui) {
    if (!ui.item.data('tag') && !ui.item.data('handle')) {
      ui.item.data('tag', true);
      //ui.item.fadeTo(400, 0.1);
    }
  }
});
$('.ImageDiv').live('click', function(eve) {
  if (eve.ctrlKey || eve.metaKey) {
    $(this).toggleClass('selectedDiv');
  }
});

.ImageDiv {
  background-color: #FFFFFF;
  border: 1px solid #C1C1C1;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 2px 2px 2px #CCCCCC;
  display: block;
  float: left;
  min-height: 40px;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 7px;
  min-width: 40px;
}
.selectedDiv {
  border: 1px solid #3399FF;
}


<table>
  <tr>
    <td id="sortable">
      <div class="ImageDiv">1</div>
      <div class="ImageDiv">2</div>
      <div class="ImageDiv">3</div>
      <div class="ImageDiv">4</div>
      <div class="ImageDiv">5</div>
      <div class="ImageDiv">6</div>
      <div class="ImageDiv">7</div>
      <div class="ImageDiv">8</div>
      <div class="ImageDiv">9</div>
      <div class="ImageDiv">10</div>
      <div class="ImageDiv">11</div>
      <div class="ImageDiv">12</div>
      <div class="ImageDiv">13</div>
    </td>
  </tr>
</table>

Single div sortable is working fine ,here My task is to sort(drag) Selected Div(Multiple) at a time (in one drag).Selection of DIV tag can be done by CTRL+CLICK

I had googled for the solution but I was unable to find the exact solution to this task. I have done the code on Jsfiddle ,the jsfiddle link :-.

Jsfiddle

It would be so thankful for fast reply. Thanks in advance

Here is a working demo I found on the internet.. http://jsfiddle.net/ma4b45x9/ — VJS, Dec 30 '14 at 05:45
@VJS Yes i had seen this demo,but it is not working for my html structure.It working fine for ul li html — Jumbo, Dec 30 '14 at 06:06
possible duplicate of [jQuery Sortable - Select and Drag Multiple List Items](http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items) — T J, Dec 30 '14 at 06:11
There are lots of questions, answers and demos out there. Did you do any research rather than asking for *"fast reply"*..? we're here to help you but not to code for you. — T J, Dec 30 '14 at 06:14
@TJ Thanx for the Solution and also opening my eyes. Do you know that i am googling solution from last 2 days tried a lot also but unable to find the exact solution. So i had post my question on stack overflow. The link you sent had been already seen by me. 1 st solution : mulitple sort is not working(box demo) 2 nd soltion : not workable on div strudture(one two three ...demo) — Jumbo, Dec 30 '14 at 06:42
@Jumbo well this [answer](http://stackoverflow.com/a/24467682/2333214), as well as [this](http://stackoverflow.com/a/25338656/2333214), [this](http://stackoverflow.com/a/24485802/2333214), [this](http://stackoverflow.com/a/26960332/2333214) etc deal with dragging multiple items. You won't find an "exact solution" out of the box. You've to try something from your side, When you get stuck with then ask questions regarding the specific problem. for example - show your attempt with the second solution and explain what is the problem you've having while trying to do it with `
` structure... — T J, Dec 30 '14 at 07:00
@TJ Well I had tried with one example Take a look at this [Jsfiddle](http://jsfiddle.net/fHSBg/261/) Here if You will look at console You will see a error **"Uncaught TypeError: Cannot read property 'insertBefore' of null"** Also when you select a horizontal div tag and try to sort, structure gets converted into Vertical. Result is fine but in general while using it look something strange. — Jumbo, Dec 30 '14 at 09:10

Jquery Sortable with one and multiple Element

0 Answers0