Javascript / Jquery：查找可排序/可拖动项目从何处拖动？

Question

我正在使用jquery的sortable和draggable的混合，并且在访问从列表项中拖动列表的父/发件人时遇到一些问题。

我可以通过可拖动的drag：或start访问父对象，但是这仅在我第一次将其从其原始容器中拖出时才发生。 在那之后，它永远不会被解雇。 我一直在尝试找出如何使用sortable的接收来获取从中拖动项目的列表的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'）进行修改。