拖放时丢失的JQuery列表项链接
拖放时丢失的JQuery列表项链接
提问于 2013-02-27 08:36:42
下面的代码将一个列表项拖放到一个框中。但是，当我将链接作为列表项放入时，一旦拖放，这些项就不再显示为链接(它们只显示为文本)。请帮帮忙。很快就会有一个项目需要这样做。我将不胜感激。
/
a = 0;
num = 1;
$(document).ready(function() {
$('li').draggable({ containment: 'document', revert: true,
start: function() {
contents = $(this).text();
}
});
$('#list').droppable({ hoverClass: 'border', accept: '.item',
drop: function() {
if(a % 4 == 0) {
$('#list').append('<br / >');
}
$('#list').append(num + '. ' + contents + ' ' + ' ' + ' ' + ' ');
a = a + 1;
num = num + 1;
}
});
});/教程
</head>
<body>
<table>
<td>
<tr>
Create Your Own Playlist <br />
Simply Drag and Drop the Lessons You'd Like to View
</tr>
</td>
<td>
<ul>
<li class="item">Agility</li>
<li class="item">Broadband</li>
<li class="item">Cloud</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Flexibility</li>
<li class="item">Hybrid</li>
<li class="item">Interoperability</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Community</li>
<li class="item">Portability</li>
<li class="item">Elasticity</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Infrastructure</li>
<li class="item">Migration</li>
<li class="item">Multi-Tenancy</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Navigation</li>
<li class="item">Optimization</li>
<li class="item">Private</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Provisioning</li>
<li class="item">Public</li>
<li class="item">Risk</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Security</li>
<li class="item">Smart Phones</li>
<li class="item">Social Media</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
<td>
<ul>
<li class="item">Standards</li>
<li class="item">Storage</li>
<li class="item">Virtual Machines</li>
<li class="item"> <a href="facebook.com">Link text</a> </li>
</ul>
</td>
</table>
<div id="list"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="ui.js"></script>
</body>
</html>/ @charset "utf-8"；/* CSS文档*/
ul {
width: 100px;
padding: 0px;
list-style: none;
}
#list {
width: 800px;
height: 150px;
background-color: #f0f0f0;
border: 1px solid #000;
overflow: auto;
}
#list.border {
border-width: 2px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-27 14:00:21
这一点：
contents = $(this).text();只发送文本。如果您改用html：
contents = $(this).html();您将通过拖放事件发送整个html块。您可以保持代码的其余部分不变。
工作示例：http://jsfiddle.net/MLhgk/
有关JQuery .html()的更多信息- http://api.jquery.com/html/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15102148
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号