Javascript 从一个UL移动到另一个UL后禁用文本_Javascript_Jquery_Html_Css_Json

Javascript 从一个UL移动到另一个UL后禁用文本

javascript jquery html css json

Javascript 从一个UL移动到另一个UL后禁用文本,javascript,jquery,html,css,json,Javascript,Jquery,Html,Css,Json,此代码将在单击时从右向左添加列表中的项目。我们必须单击弹出的图像才能移动。现在我要做的是从一个json文件中获取元素，一旦我将一个文本移动到另一个框中，就必须禁用选择。用户不能再次单击它，换句话说，一个项目可以选择一次。但该项目不得从第一个列表中删除。请帮忙。提前谢谢 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <titl

此代码将在单击时从右向左添加列表中的项目。我们必须单击弹出的图像才能移动。现在我要做的是从一个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>


例子
#firstlist li:hover img{display:inline；}
#firstlist li:hover{background:#CCF5CC；}
#ui选择{背景：#80B280；}
#firstlist{list样式类型：无；}
#第一个列表li{边距：3px；填充：0.3em；}
#seclist{list样式类型：无；}
#seclist li{padding:0.2em；}
img{显示：无；}
清单1
清单2

苹果
橙色的
阿瓦卡多
香蕉
芒果


$（函数（）{
$（“#firstlist”）.selective（）；
});
$（函数（）{
$（“#seclist”）.selective（）；
});
$（“img”）。单击（函数（）{
var text=$（this.closest（“li”）.text（）；
$（''，{html:text}）.appendTo（'ul.seclist'）
});

试试这个

$("img").on("click" , function() {
            var text1 = $(this).closest("li").text();
            $('ul.seclist').append("<li>"+text1+"</li>");
            $(this).off("click");
});

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（'ul.seclist'）。追加（“”+text1+””；
$（此）.off（“单击”）；
});

或

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（''，{html:text1}）.appendTo（'ul.seclist'）；
$（此）.off（“单击”）；
});

试试这个

$("img").on("click" , function() {
            var text1 = $(this).closest("li").text();
            $('ul.seclist').append("<li>"+text1+"</li>");
            $(this).off("click");
});

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（'ul.seclist'）。追加（“”+text1+””；
$（此）.off（“单击”）；
});

或

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（''，{html:text1}）.appendTo（'ul.seclist'）；
$（此）.off（“单击”）；
});

试试这个

$("img").on("click" , function() {
            var text1 = $(this).closest("li").text();
            $('ul.seclist').append("<li>"+text1+"</li>");
            $(this).off("click");
});

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（'ul.seclist'）。追加（“”+text1+””；
$（此）.off（“单击”）；
});

或

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（''，{html:text1}）.appendTo（'ul.seclist'）；
$（此）.off（“单击”）；
});

试试这个

$("img").on("click" , function() {
            var text1 = $(this).closest("li").text();
            $('ul.seclist').append("<li>"+text1+"</li>");
            $(this).off("click");
});

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（'ul.seclist'）。追加（“”+text1+””；
$（此）.off（“单击”）；
});

或

$（“img”）。在（“单击”，函数（）{
var text1=$（this）.closest（“li”）.text（）；
$（''，{html:text1}）.appendTo（'ul.seclist'）；
$（此）.off（“单击”）；
});

检查上面的链接。只需解除单击事件的绑定

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

$（“img”）。单击（函数（事件）{
var text=$（this.closest（“li”）.text（）；
$（''，{html:text}）.appendTo（'ul.seclist'）；
$（this.unbind（'click'）；
});

它不会删除元素，只允许您第一次单击它。

检查上面的链接。只需解除单击事件的绑定

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

$（“img”）。单击（函数（事件）{
var text=$（this.closest（“li”）.text（）；
$（''，{html:text}）.appendTo（'ul.seclist'）；
$（this.unbind（'click'）；
});

它不会删除元素，只允许您第一次单击它。

检查上面的链接。只需解除单击事件的绑定

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

$（“img”）。单击（函数（事件）{
var text=$（this.closest（“li”）.text（）；
$（''，{html:text}）.appendTo（'ul.seclist'）；
$（this.unbind（'click'）；
});

它不会删除元素，只允许您第一次单击它。

检查上面的链接。只需解除单击事件的绑定

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

$（“img”）。单击（函数（事件）{
var text=$（this.closest（“li”）.text（）；
$（''，{html:text}）.appendTo（'ul.seclist'）；
$（this.unbind（'click'）；
});

它不会删除该元素，只允许您第一次单击它。

您如何知道该文本是禁用的请共享JSIDLE链接实际上不必禁用它。用户不能再次添加。因此，如果图像被禁用，或者即使其在悬停时可见，移动也不能被禁用，这将是正常的happen@Vithushan检查我的回答你怎么知道文本是禁用的请共享JSFIDLE链接实际上它不必禁用。用户不能再次添加。因此，如果图像被禁用，或者即使其在悬停时可见，移动也不能被禁用，这将是正常的happen@Vithushan检查我的回答你怎么知道文本是禁用的请共享JSFIDLE链接实际上它不必禁用。用户不能再次添加。因此，如果图像被禁用，或者即使它在悬停时可见，移动也可以