JavaScript/jQuery:如何找到从哪里拖出可排序/可拖项?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (61)

我正在使用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>
提问于
用户回答回答于

如果需要最后一个父项并获取其ID,请使用:

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

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

扫码关注云+社区

领取腾讯云代金券