在Jquery中拖放列表

我已經使用基本的HTML和jQuery創建了這個列表。這只是一個大項目的測試，但它似乎沒有工作。在Jquery中拖放列表

我有一個.css頁面，一個html頁面和一個.js頁面，它們都應該一起工作。

這裏是HTML。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xml:lang="en" lang="en"> 
<head> 
<title>JQuery Drag List Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="title" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link rel="stylesheet" type="text/css" href="/css/testingcolumns.css"></link> 

</head> 
<body> 

<ul> 
    <li class="item">Coffee</li> 
    <li class="item">Tea</li> 
    <li class="item">Milk</li> 
</ul> 

<div id="list"></div> 


<script type="text/javascript" src="js/jq/dragdrop.js"></script> 
<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script> 

</body> 
</html>

這是JQuery的

$(document).ready(function() { 
    $('li').draggable({ 
     containment: 'document', 
     revert: true, 
     start: function() { 
      contents = $(this).text(); 
     } 
    }); 


    $('#list').droppable({ 
     hoverClass: 'border', 
     accept: '.item', 
     drop: function() { 
      $('#list').append(contents + ' <br /> '); 
     } 
    }); 

});

這是CSS

ul { 
width: 150px; 
padding: 0px; 
list-style: none; 
} 

#list { 

width: 120px; 
height: 180px; 
background-color: #0F9; 
border: 1px solid #000; 
overflow: auto; 
} 

#list.border { 
border-width: 2px; 
}

總之這應該是工作，但由於某些原因，當我使用Dreamweaver在瀏覽器中的3預覽列表元素顯示爲項目符號點和列表（在Dreamweaver中顯示爲綠色框）完全不顯示。項目符號點不會在瀏覽器中拖動。

來源

2012-12-12 Jack Parker

你可以把它放入JSFiddle嗎？ –

什麼是JS小提琴？ –

http://jsfiddle.net/是一個網站，允許您添加HTML，JavaScript和CSS的片斷，然後看看它將如何呈現。在這種情況下，你可以從上面獲得所有的片段（你需要將你的JS文件的路徑改爲全局的），然後粘貼這裏的鏈接。這將讓人們看到你在說什麼，並用你的代碼「擺弄」，看看他們是否可以修復它。這是一個偉大的工具！ –

嘗試切換你是從包括在你的頁面的JS文件的順序：

<script type="text/javascript" src="js/jq/dragdrop.js"></script> 
<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script>

到

<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/jq/dragdrop.js"></script>

我不知道什麼是dragdrop.js，但如果它使用jQuery或jQuery UI可能是你的問題。

來源

2012-12-12 21:36:48

在Jquery中拖放列表

回答

相關問題