Disable text once it is moved from one UL to another UL
Question
This code will add the items from the list on right to left when clicked. We have to click on the pop up image to move. Now what i was expected to do is to get the elements from a json file and once i had moved an text to the other box it must that selection must be disabled. user must not be able to click it again, which in another word one item can be selected once. But that item MUST not be removed from the first list. Please help. thanks in advance
<!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>
2 answers
solution1
2 ACCPTED 2014-07-23 08:14:38
Check the above link. Just unbind the click event
$("img").click(function(event) {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist');
$(this).unbind('click');
});
It ll not remove the element and lets you click it only first time.
solution2
1 2014-07-23 08:12:30
Try this
$("img").on("click" , function() {
var text1 = $(this).closest("li").text();
$('ul.seclist').append("<li>"+text1+"</li>");
$(this).off("click");
});
or
$("img").on("click" , function() {
var text1 = $(this).closest("li").text();
$('<li />', {html: text1}).appendTo('ul.seclist');
$(this).off("click");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.