Question

我有一个网页，分为两列，左侧是一侧，右侧是树形结构。现在，我想将列表项删除到特定的树节点上，我可以这样做。但我只能获得列表项ID，而不能获取项目下垂的节点ID。

列表项目有类＆＃39; ttlTipBU＆＃39;

 $(".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);

            }
        });

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

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

Answer 1

您必须检查何时收到该项目，而不是在使用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>

获取丢弃的区域ID

1 个答案: