将文本从一个UL移到另一个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. 现在我应该做的是从json文件中获取元素，一旦我将文本移动到另一个框中，则必须禁用该选择。 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>

Answer 1

fiddle demo 小提琴演示

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. 它不会删除该元素，只能让您第一次单击它。

Answer 2

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");
   });

DEMO 演示

将文本从一个UL移到另一个UL后，请禁用它

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-07-23 08:14:38

解决方案2
1 2014-07-23 08:12:30

将文本从一个UL移到另一个UL后，请禁用它

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-07-23 08:14:38

解决方案2 1 2014-07-23 08:12:30

解决方案1
2 已采纳 2014-07-23 08:14:38

解决方案2
1 2014-07-23 08:12:30