Javascript / Jquery:查找拖动可排序/可拖动项目的位置?

时间:2018-02-23 02:27:30

标签: javascript jquery

我正在使用jquery的可排序和可拖动的混合,并且在访问父/发送者时遇到一些问题,即列表项被拖动FROM。

我可以在可拖动的拖动中访问父项:或者启动:但是只有在我第一次将其拖出原始容器时才会发生这种情况。在那之后,它永远不会被解雇。我一直在试图弄清楚如何从可排序的接收中获取项目被拖动的列表的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>

1 个答案:

答案 0 :(得分:0)

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

如果您需要最后一位父亲并获取其身份,请使用:

$(本).parent()ATTR( 'ID');

如果您正在寻找的控件是2个或更多父母,那么您将需要设置.parent()两次才能获得。

编辑:如果你需要另一个想法,请使用.last('obj')来获取。