Allow element to drag & drop in one TR only

Question

In this jsFiddle. I want to add prevent drag and drop functionality if TR is changed of the element.

Elements can be dragged and dropped in their own TR only. How can I do this?

Should I add some restriction in accept method ?

Following is the JS code:

$(function() {
                $(".dragDiv").draggable({
                    revert: 'invalid'
                });
                $(".mainTable tr td").droppable({
                    accept: function() {
                        var $this = $(this);
                    console.log(JSON.stringify($this.data("parent-id")+'==='+$this.parent().attr("id")));
                    if (($this.data("parent-id") == $this.parent().attr("id")) && $(this).find("*").length == 0)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                    },
                    drop: function(event, ui) {

                        var $this = $(this);
                        $this.append(ui.draggable.css({
                            top: 0,
                            left: 0
                        }));
                        ui.draggable.position({
                            my: "center",
                            at: "center",
                            of: $this,
                            using: function(pos) {
                                $(this).animate(pos, "slow", "linear", function() {

                                });
                            }
                        });
                    }
                });
            });

Answer 1

Change you accept callback as follows:

accept: function (item) {
  return $(this).closest("tr").is(item.closest("tr")) && $(this).find("*").length == 0;
}

---

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: function(item) {
      return $(this).closest("tr").is(item.closest("tr")) && $(this).find("*").length == 0;
    },
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable.css({
        top: 0,
        left: 0
      }));
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, "slow", "linear", function() {

          });
        }
      });
    }
  });
});

.mainTable {
  margin: 20px auto;
  padding: 0px;
}
.mainTable tr td {
  width: 100px;
  height: 100px;
}
.dragDiv {
  text-align: center;
  background-color: #00ABA9;
  height: 50px;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 50%;
}

<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table border="1" class="mainTable">
  <tr>
    <td id="11">
      <div class="dragDiv" id="1">N</div>
    </td>
    <td id="12">&nbsp;</td>
    <td id="13">&nbsp;</td>
  </tr>
  <tr>
    <td id="21">&nbsp;</td>
    <td id="22">
      <div class="dragDiv" id="2">N</div>
    </td>
    <td id="23">&nbsp;</td>
  </tr>
  <tr>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">
      <div class="dragDiv" id="3">N</div>
    </td>
  </tr>
</table>