Draggable and Sortable

by Subhasish2015

HTML

<html>

  <head>
  </head>

  <body>
    <p>
      The 'drag me' box is set as draggable, and connects to the sortable box (in gray).
    </p>
    <p>
      If the 'drag me' box has a 'helper' set as 'clone', the example works as expected. If 'clone' is not set, the the following error will be thrown:
    </p>
    <p>
      Uncaught TypeError: Cannot read property 'options' of undefined
    </p>

    <div class="red">
      drag me
    </div>

    <div class="group">
      <div class="blue">
        item 1
      </div>
      <div class="blue">
        item 2
      </div>
      <div class="blue">
        item 3
      </div>
    </div>
  </body>

</html>

CSS

.body {
  padding: 10px;
}

p {
  margin: 5px;
}

.red {
  height: 50px;
  width: 50px;
  background-color: blue;
  border: 1px solid #000;
  margin: 5px;
}

.blue {
  height: 50px;
  width: 50px;
  background-color: red;
  border: 1px solid #000;
  margin: 5px;
}

.group {
  background-color: gray;
  border: 1px solid #000;
  margin: 5px;
  padding: 5px;
}

JavaScript

$('.red').draggable({
  cursor: 'move',
  connectToSortable: ".group",
  // uncomment the following and it works fine.
  // comment it out and you get:
  // Uncaught TypeError: Cannot read property 'options' 
  // of undefined
  helper: 'clone'
});
$(".group").disableSelection();
$('.group').sortable();