jquery 获取删除区域ID

a64a0gku  于 2023-03-07  发布在  jQuery
关注(0)|答案(1)|浏览(175)

我有一个网页分为两列,左边一列,右边一列是树结构。现在,我想把列表项放到特定的树节点上,我可以做到这一点。但是我只能得到列表项的id,而不能得到项被放下来的节点的ID。
列表项具有类“ttlTipBU”

$(".ttlTipBU").draggable({
            revert: "invalid",
            refreshPositions: true,
            drag: function (event, ui) {
                ui.helper.addClass("draggable");
            },
            stop: function (event, ui) {
                ui.helper.removeClass("draggable");
                var contactID = $(this).find('div').html();
                console.log('this is contact ID----'+  contactID);

            }
        });

对于树结构节点,我们在每个节点上实现的类是“orgNodeMap“,但当我将其放在节点上时,它不会执行以下操作

$("div.orgNodeMap").on("drop", function (event, ui) {
            console.log('not coming here');
 });
mwg9r5ms

mwg9r5ms1#

您必须检查项目何时收到,而不是使用sortable删除项目的时间。

$(".ttlTipBU").sortable({
  revert: "invalid",
  refreshPositions: true,
  connectWith: ".ttlTipBU",
  drag: function(event, ui) {
    ui.helper.addClass("draggable");
  },
  receive: function(event, ui) {
    console.log('this is contact ID---- ' + this.id);
  }
}).disableSelection();
.ttlTipBU {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

.ttlTipBU li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


<ul id="sortable1" class="ttlTipBU">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="ttlTipBU">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

相关问题