爲什麼JQuery將風格添加到我的附加列表項中？

我使用JQuery將項目從一個列表中拖放到另一個列表中。爲什麼JQuery將風格添加到我的附加列表項中？

項目被刪除後，它將從原始列表中刪除並附加到其目標列表中。

我已經使用了下面的代碼，它在檢查DOM時似乎表現得非常好，但它在頁面上顯示不正確。通常在列表之外並且在右上方。

我的第一個猜測是，這是一個CSS問題，但即使在刪除所有樣式表後，問題仍然存在。

Chrome檢查器中的更仔細的檢查表明，每個列表項目都添加了內聯樣式。我不確定它來自哪裏。

這是我的代碼。

 $(function() { 

    $(".drag").draggable(); 

    $(".drop").each(function (index){ 

     var title = $(this).attr('title'); 

     $(this).droppable({  
      accept: title, 
      activeClass: "ui-state-hover", 
      hoverClass: "ui-state-active", 
      drop: function(event, ui) { 

      ui.draggable.remove(); 
      $(this).append(ui.draggable); 
      } 
      }); 
    }); 
}); 
</script> 




<ul> 
<li class="drag RED">RED</li> 
<li class="drag BLUE">BLUE</li> 
</ul> 

<ul class="drop" title=".RED"> 
<li>Stuff</li> 
</ul> 

<ul class="drop" title=".BLUE"> 
<li>Stuff</li>  
</ul>

來源

2010-09-22 matt

您可以使用jsfiddle將其顯示爲演示。 – 2010-09-22 06:17:51

什麼風格加錯了？顏色是否從黃色變爲粉紅色？什麼？！你在期待什麼，發生了什麼？ – Reigel 2010-09-22 06:24:22

@Reigel我期待被拖動的列表項被插入到被拖動到的列表中。 DOM檢查器顯示出現這種情況，但列表項出現在列表的外部，即錯誤的位置。 – matt 2010-09-22 06:36:52

你的意思風格像

position: relative; left: 151px; top: 32px;

如果是這樣，這是來自jQuery UI的插件，分不清哪裏是你的DROP掉元素，相對於父母。

來源

2010-09-22 06:17:02

'title =「有什麼問題。RED」'？ – Reigel 2010-09-22 06:21:09

我不認爲這是問題所在。我沒有定義樣式。我修改了腳本以刪除所有標題和類別，但位置問題仍然存在。 – matt 2010-09-22 06:38:05

@matt不要你有風格的紅色，藍色 – 2010-09-22 06:55:34

我在處理一些基本的HTML和Draggable jQuery庫時遇到過這種情況。點擊here獲取複製問題的JSFiddle。

我只能通過簡單地利用jQuery的css（）函數手動將值設置爲零來解決此問題。例如

$(ui.draggable).css({'left': '0', 'top': '0'});

我很欣賞你問爲什麼這是一個很好的問題，一個我不能回答，但我認爲這將是值得有助於誰達到同樣的問題這一頁。

來源

2013-10-07 20:27:54 Bower

爲什麼JQuery將風格添加到我的附加列表項中？

回答

相關問題