我混合使用了jquery的sortable和draggable,在访问父/发送者(也就是拖拽列表项的位置)时遇到了一些问题。
我可以在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>
发布于 2018-02-23 10:37:04
我不是专家,但是$(this).parent()将返回对象的最后一个父对象。
如果您需要最后一个父对象并获取的id,则使用:
$(this).parent().attr('id');
如果您正在查看的控件是2个或更多的父级,那么您将需要设置两次.parent()才能获得。
编辑:如果你需要得到另一个想法,使用.last('obj')来达到这个目的。
https://stackoverflow.com/questions/48940219
复制相似问题