Drag and Drop Div Использование Jquery с использованием загрузочных сеток div

Question

Я хочу перетаскивать div с помощью jQuery. Я реализовал разделы Bootstrap и хочу перетащить поля в другой раздел начальной загрузки и получить строку и столбец после перетаскивания каждого из разделов.

<div class="gadget_container">
  <div class="row" data-row="1">
    <div class="col-md-4 " data-col="1">
      <div class="box box-primary " data-gadgetfeatureid="6">
        <div class="box-header with-border">
          <h3 class="box-title">Filter Results</h3>
        </div>
        <div class="box-body">
          <iframe src="https:\\www.google.com\"></iframe>
        </div>
      </div>
    </div>
    <div class="col-md-4 " data-col="2">
      <div class="box box-primary " data-gadgetfeatureid="7">
        <div class="box-header with-border">
          <h3 class="box-title">Activity Stream</h3>
        </div>
        <div class="box-body">
          <iframe src="https:\\www.google.com\"></iframe>
        </div>
      </div>
    </div>
    <div class="col-md-4 " data-col="3">
      <div class="box box-primary " data-gadgetfeatureid="8">
        <div class="box-header with-border">
          <h3 class="box-title">Agile Wallboard Gadget</h3>
        </div>
        <div class="box-body">
          <iframe src="https:\\www.google.com\"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="row" data-row="2">
    <div class="col-md-4 " data-col="1">
      <div class="box box-primary " data-gadgetfeatureid="9">
        <div class="box-header with-border">
          <h3 class="box-title">Assigned to Me</h3>
        </div>
        <div class="box-body">
          <iframe src="https:\\www.google.com\"></iframe>
        </div>
      </div>
    </div>
    <div class="col-md-4 " data-col="2">
      <div class="box box-primary " data-gadgetfeatureid="10">
        <div class="box-header with-border">
          <h3 class="box-title">Workload Pie Chart</h3>
        </div>
        <div class="box-body">
          <iframe src="https:\\www.google.com\"></iframe>
        </div>
      </div>
    </div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="3">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="4">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="5">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="6">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="7">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="8">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="9">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="10">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="11">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
  <div class="row" data-row="12">
    <div class="col-md-4 " data-col="1"></div>
    <div class="col-md-4 " data-col="2"></div>
    <div class="col-md-4 " data-col="3"></div>
  </div>
</div>