jquery UI可拖动：ui.children不是函数

我有一个可拖动的列表，一个可排序的可拖放列表和一些里面的第一个。jquery UI可拖动：ui.children不是函数

现在我想拉他们过来，在停止funtion我有一个功能，增加了一个班的第一个孩子（它代表像

<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(); 
     } 

    });

只要我拉和元素或重新排序，我得到的说错误。此外，在刷新，列表似乎繁殖本身..但我想这是另外一个问题...

Full fiddle (pretty messy, functionality in top dropdown button "PL TOGGLE"

UPDATE：另一件事我注意到：第一阻力工作没有问题，则显示错误在发布时，随后的拖拽会（大多数情况下它们有时会...）不起作用

来源

2015-04-04 Paul Schneider

你可以添加一个演示是为了说明问题？ – 2015-04-04 20:09:40

我刚才复制了一切，但拖动根本不起作用...不知道为什么（哦，它看起来真的很难看，对不起：D）我谈论的名单是在“切换pl“按钮。想法：从右到左拉他们。 https://jsfiddle.net/PSone/7egjrrnn/ – 2015-04-04 20:55:54

你需要用户可以使用jquery对象，然后将第一个元素包装到另一个jquery对象中以执行所需操作。

所以更改：

ui.children("li")[0].addClass(".slot_clip_info");

到

$($(ui).children("li")[0]).addClass(".slot_clip_info");

来源

2015-04-04 21:50:04 Rooster

这个伎俩，谢谢！ – 2015-04-04 22:08:04

在jQuery UI的可拖动模块中，stop函数有2个参数：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");

来源

2015-04-04 21:49:37 Shikiryu

html is here https://jsfiddle.net/PSone/7egjrrnn/ 我正在尝试它 – 2015-04-04 22:01:51

它说“ui.helper是undefined”，但我想想我明白了。公鸡的答案为我工作。谢谢你们俩 – 2015-04-04 22:09:29

jquery UI可拖动：ui.children不是函数

回答

相关问题