Javascript/Jquery：查找可排序/可拖动项目的拖动位置？

Question

我正在使用 jquery 的可排序和可拖动的组合，并且在访问父/发件人（也就是从其中拖动列表项的位置）时遇到了一些问题。

我可以在可拖动的拖动中访问父级：或开始：但是，这只发生在我第一次将其从原始容器中拖出时。在那之后，它再也没有被解雇过。我一直在试图弄清楚如何使用可排序的接收来获取从列表中拖动项目的 id：但我一直不确定。

此外，您能否发布一个链接，我可以在哪里获取有关所有 ui.item 和 ui.sender 等的信息？我真的找不到描述所有 ui 属性等的文档。

这是我的代码：

var origin = null;
var newItem = null;
$("#wordBank,.words").draggable({
    helper: "clone",
    connectToSortable: ".sort",
    drag: function getParent() {
        origin = $(this).parent()[0].id;
        console.log("origin = " + origin);
        return (origin);
    
    }
});
$(".words,.sort").sortable({
  connectWith: "#wordBank,.sort",
  change(event,ui)
  {
    //var sender = ui.sender[0].id;
    //console.log("SNEDER = " + sender);
  },
  beforeStop: function(event,ui) {
    newItem = ui.item[0];
    
  },
  receive: function (event, ui) {
    var sendingID = $(this).closest("ul").attr("id");
    console.log("OKOK " + sendingID);    
      ui.item.toggleClass("highlight");
      var currentListID = this.id; //where the item is dropped
      var originatedID = origin; //where item came from
      var itemID = ui.item[0].id;
      var itemContent = ui.item[0].innerHTML; //which item it is (or . 
      //ui.item[0].id)
      var currentListLength = this.children.length;

    //console.log(typeof itemContent);
    $(newItem).attr("id",itemContent);
    
    //console.log(this);
    //alert(ui.helper.attr("value"));


    
      //if current item is dropped in the word bank, remove the list-
      //inline-item
      console.log(currentListID);

      if (!ui.item[0].classList.contains("list-inline-item"))
      {
          console.log("ko");
          ui.item[0].classList.add("list-inline-item");
      }
  
      //console.log(originatedID==="wordBank");
      //console.log(originatedID!=="wordBank" && currentListID 
      //==="trash");
      if (originatedID === "wordBank")
      {
          if (currentListID === "trash")
          {
              ui.helper[0].remove();
          }
          else 
          {
              //console.log("originalID CSS = " + originatedID);
             // ui.helper.css("font-size","10px");
          }
      }
      else if (originatedID !== "wordBank" && currentListID === 
      //"trash")
      {
          ui.item[0].remove();
      }

      console.log(currentListID==="trash" && originatedID==="wordBank")
      if ((currentListID === "trash") && (originatedID === "wordBank"))
      {
          //alert("inHere");
        //console.log(ui.helper.remove());
       // console.log("Now testing the removal: ");
        //works when directly from wordBank
        ui.helper[0].remove();
    }
  }
});
$().disableSelection();

.border {
border: 1px black solid;
}

#wordBank {
border: 2px pink solid
}

<ul id="wordBank" class="bank1" value = "ok">
	<li id="1" value = "word1" class="words word1">Word1</li>
	<li id="2" value = "word2" class="words word2">Word2</li>
	<li id="3" value = "word3" class="words word3">Word3</li>
	<li id="4" value = "word4" class="words word4">Word4</li>
	<li id="5" value = "word5" class="words word5">Word5</li>
</ul>

<div  id="drop1" class="border sort">1. </div>
<div id="drop2" class="border sort">2. </div>
<div id="drop3" class="border sort">3. </div>
<div id="drop4" class="border sort">4. </div>
<div id="trash" class="border sort">5.  Trash Here </div>

Answer 1

好吧，我不是专家，但是 $(this).parent() 会返回对象的最后一个父对象。

如果您需要最后一个父级并获取然后使用的 id：

$(this).parent().attr('id');

如果您要查找的控件最后是 2 个或更多父级，则需要设置 .parent() 两次才能获取。

编辑：如果您需要获得另一个想法，请使用 .last('obj') 来获得。