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不是函數

回答

相關問題