在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中拖放列表

回答

相关问题