[英]Disable text once it is moved from one UL to another UL
该代码将在单击时从右至左添加列表中的项目。 我们必须单击弹出的图像才能移动。 现在我应该做的是从json文件中获取元素,一旦我将文本移动到另一个框中,则必须禁用该选择。 用户必须不能再次单击它,换句话说,一次只能选择一个项目。 但是,不得将其从第一个列表中删除。 请帮忙。 提前致谢
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
#firstlist li:hover img {display: inline;}
#firstlist li:hover { background: #CCF5CC; }
#firstlist .ui-selected { background: #80B280; }
#firstlist { list-style-type: none;}
#firstlist li { margin: 3px; padding: 0.3em;}
#seclist {list-style-type: none;}
#seclist li {padding: 0.2em;}
img {display:none;}
</style>
</head>
<body>
<table id="myTable" class= "table table-bordered">
<tr>
<th class="col-md-6 text-center success">
List 1
</th>
<th class="col-md-6 text-center success">
List 2
</th>
</tr>
<tr>
<td class="col-md-6">
<ul id="firstlist">
<li>Apple <img src="next.jpg" id="next1"></li>
<li>Orange <img src="next.jpg" id="next2"></li>
<li>Avacado <img src="next.jpg" id="next3"></li>
<li>Banana <img src="next.jpg" id="next4"></li>
<li>Mango <img src="next.jpg" id="next5"></li>
<ul>
</td>
<td class="col-md-6">
<ul class = "seclist" id = "seclist"> </ul>
</td>
</tr>
</table>
<script>
$(function(){
$( "#firstlist" ).selectable();
});
$(function() {
$( "#seclist" ).selectable();
});
$("img").click(function() {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist')
});
</script>
</body>
</html>
检查上面的链接。 只需取消绑定点击事件
$("img").click(function(event) {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist');
$(this).unbind('click');
});
它不会删除该元素,只能让您第一次单击它。
尝试这个
$("img").on("click" , function() {
var text1 = $(this).closest("li").text();
$('ul.seclist').append("<li>"+text1+"</li>");
$(this).off("click");
});
要么
$("img").on("click" , function() {
var text1 = $(this).closest("li").text();
$('<li />', {html: text1}).appendTo('ul.seclist');
$(this).off("click");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.