jquery UI draggable:UI.children不是一个函数
jquery UI draggable: ui.children is not a function
我有一个可拖动列表、一个可排序的可丢弃列表和第一个列表中的几个li。
现在我想把它们拉过来,在stop函数中,我有一个函数,它向第一个孩子添加了一个类(它是一个跨度,表示像一样的剪辑号
<li>
<span>1.</span>
<span>Title</span>
<span>1min23sec</span>
</li>
)。原因是,我想表示播放列表中的原始剪辑编号(可排序)。
但我收到一个控制台错误,说
TypeError: ui.children is not a function
ui.children("li")[0].addClass(".slot_clip_info");
我不是100%确定,但我认为这个确切的代码在过去的一段时间里已经起作用了,我可能在不知情的情况下更改了一些东西,但我不知道。可拖动:
$(function() {
$(".pl_clipEntry").draggable({
appendTo: "body",
revert: "invalid",
connectToSortable: "#tracks",
distance: 20,
helper: function(){
return $(this).clone().width($(this).width()); // hack for the drag-clone to keep the correct width
},
stop: function(ui) {
ui.children("li")[0].addClass(".slot_clip_info");
},
zIndex: 100
});
});
可分拣:
$(function() {
var removeItem;
$("#tracks").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "sort_placeholder",
helper: "clone",
distance: 20,
sort: function () {
$(this).removeClass("ui-state-default");
updatePlaylist();
},
over: function (event,ui) {
updatePlaylist();
removeItem = false;
console.log(event);
console.log(ui);
var originalClass = ui.helper.context.childNodes[0].className;
console.log(originalClass);
var small_clip = originalClass.match(/('d+)/g)[1];
ui.item.context.children[0].innerHTML = small_clip;
ui.item.context.children[0].classList.add("slot_clip_info");
},
out: function () {
updatePlaylist();
removeItem = true;
},
beforeStop: function(event,ui) {
if (removeItem) {
ui.item.remove();
}
},
stop: function(event,ui) {
console.log("checking placeholder");
var list = $(this);
var count = list.children(':not(.placeholder)').length;
list.children('.placeholder').css("display", count > 0 ? "none" : "block");
savePlaylist();
}
});
一旦我拉和元素IN或重新排序它们,我就会得到所说的错误。此外,在刷新时,列表似乎会自我倍增。。但我想这是另一个问题。。。
全小提琴(相当混乱,顶部下拉按钮"PL TOGGLE"中的功能
更新:我注意到的另一件事是:第一次拖动没有问题,然后在发布时显示错误,随后的拖动将(大多数…有时确实…)不起作用
您需要将ui设置为jquery对象,然后将第一个元素封装在另一个jquery对象中以执行您想要的操作。
所以改变:
ui.children("li")[0].addClass(".slot_clip_info");
至
$($(ui).children("li")[0]).addClass(".slot_clip_info");
stop
函数有两个参数:event
和ui
。
ui
是一个javascript对象(而不是jQuery对象,有区别。)
此对象有3个属性:
helper
是jQuery对象position
是javascript对象offset
是javascript对象
根据您的HTML代码(我们没有),您可以替换
ui.children("li")[0].addClass(".slot_clip_info");
通过
ui.helper.children("li")[0].addClass(".slot_clip_info");
相关文章:
- jquery UI draggable:UI.children不是一个函数
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 将jquery ui窗口的父元素设置为另一个元素
- 链接问题:下一个字符包含在<a>TinyMce ui TinyMce中的标签
- Onsen UI在点击时显示一个日期选择器
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- jQuery UI Slider ui.value 获取最后一个数字
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 另一个 UI 视图中的角度 UI 视图
- 如何将剑道UI窗口与页面上的另一个元素对齐
- 使用ajax和jquery ui滑块实现一个下拉框
- 在可排序的JQuery UI列表中至少保留一个项目
- 如何在jsp页面中包含一个拖放交互UI
- 有可能做一个日期&使用jquery ui的时间日历
- 如何停止Angular UI路由器将可选参数从一个路由传递到完全不同的路由
- 对jQuery UI可排序表应用包含可以防止将高行移动到最后一个位置
- 正在将材质UI组件收集到一个文件中
- 谷歌应用程序脚本搜索UI下一个和上一个功能
- Jquery UI选项卡&选择方框-下一个/上一个按钮