Html DragDrop

Set the restricter property of the jqxDragDrop. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="draggable-parent">
    <div id="draggable" class="draggable">
        <div class="label">I can be dragged only inside my parent</div>
    </div>
</div>

CSS

.draggable {
      border: 1px solid #bbb;
      background-color: #C9ECFF;
      width: 100px;
      height: 100px;
      left: 30px;
      top: 50px;
      padding: 5px;
      z-index: 2;
  }
  #draggable-parent {
      background-color: #eeffee;
      width: 350px;
      height: 350px;
      text-align: center;
      border: 1px solid #eee;
      float: left;
  }
  .main-container {
      width: 650px;
      z-index: 0;
  }

JavaScript

$('#draggable').jqxDragDrop({
      restricter: 'parent',
      dropTarget: '.drop-target'
  });