Edit this page

group String(default: "default")

Used to group sets of draggable and drop targets. A draggable with the same group value as a drop target will be accepted by the drop target.

Example

<div class="orange"></div>
<div class="orange"></div>
<div class="purple"></div>
<div class="purple"></div>
<div id="orangeArea"></div>
<div id="purpleArea"></div>

<script>
  $(".orange").kendoDraggable({
    group: "orangeGroup",
    hint: function(element) {
      return element.clone();
    }
  });

  $(".purple").kendoDraggable({
    group: "purpleGroup",
    hint: function(element) {
      return element.clone();
    }
  });

  $("#orangeArea").kendoDropTarget({ group: "orangeGroup", drop: onDrop });
  $("#purpleArea").kendoDropTarget({ group: "purpleGroup", drop: onDrop });

  function onDrop(e) {
    e.draggable.destroy();
    e.draggable.element.remove();
  }
</script>
<style>
  .orange, .purple{
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
  }
  #orangeArea, #purpleArea {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    margin: 5px;
  }
  .orange, #orangeArea { background-color: orange; }
  .purple, #purpleArea { background-color: purple; }
</style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy