將文本從一個UL移到另一個UL后，請禁用它

Question

該代碼將在單擊時從右至左添加列表中的項目。 我們必須單擊彈出的圖像才能移動。 現在我應該做的是從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>

Answer 1

小提琴演示

檢查上面的鏈接。 只需取消綁定點擊事件

     $("img").click(function(event) {
            var text = $(this).closest("li").text();
            $('<li />', {html: text}).appendTo('ul.seclist');
            $(this).unbind('click');
        });

它不會刪除該元素，只能讓您第一次單擊它。

Answer 2

嘗試這個

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

演示

將文本從一個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