How to Drag an element and drop into a kendoSortable List?

I am trying to drag an element from out site of kendoSortable and drop it into kendoSortable.

I set connectWith property of kendoSortable. But it`s not working.

In Kendo UI demo i did not find this kind of example.

Here is my Code :

<h1>Sortable</h1>


<ul id="sortable">
      <li class="list-item">Apples</li>
      <li class="list-item">Grapefruits</li>
      <li class="list-item">Bananas</li>
  </ul>

  <h1>Dragable</h1>
  <ul id="dragable">
      <li class="list-item">D1</li>
      <li class="list-item">D2</li>
      <li class="list-item">D3</li>
  </ul>

 <script>
     $("#sortable").kendoSortable({
        connectWith: "#dragable",
        placeholder: function placeholder(element) {
            return $("<li class='list-item' id='placeholder'>Drop Here!</li>");
        },
    });

     $("#dragable li").kendoDraggable({
        hint: function () {
            return $("<li class='list-item' id='placeholder'>GOOOOOO!</li>");
        }
    });

    $("#sortable").kendoDropTarget({
        dragenter: function () {
            console.log("enter");
        },
        dragleave: function () {
            console.log("leve");
        },
        drop: function (e) {

        }
    });
  </script>

In dojo.telerik

Given your two lists:

<h1>Sortable</h1>
<ul id="sortable">
  <li class="list-item">Apples</li>
  <li class="list-item">Grapefruits</li>
  <li class="list-item">Bananas</li>
</ul>

<h1>Dragable</h1>
<ul id="dragable">
  <li class="list-item">D1</li>
  <li class="list-item">D2</li>
  <li class="list-item">D3</li>
</ul>

and assuming that you want to copy it from the second (#draggable) into the first (#sortable), what you should do define connectWith in the second (origin of the copy):

  $("#sortable").kendoSortable({
      placeholder: function placeholder(element) {
          return $("<li class='list-item' id='placeholder'>Drop Here 1!</li>");
      }
  });

  $("#dragable").kendoSortable({
      connectWith: "#sortable",
      placeholder: function placeholder(element) {
          return $("<li class='list-item' id='placeholder'>Drop Here 2!</li>");
      }
  });

Also important to note that placeholder probably be defined in both. The first is used when you move from this list while the second is used when the origin is in the second list (no matter if the drop is the first or the second).

You can see it here: http://dojo.telerik.com/@OnaBai/oJIy