将jquery-ui-sortable列表中的拖放更改为click事件

Question

我继承了一个旧的“职业发现者”项目。 其主旨是选择几个形容词，并输出最适合用户的“职业”。 我正在尝试使它适合移动设备。 它使用的是JQuery-Ui-Sortable，我对此不太熟悉。 现在，我想对其进行更改，以便仅单击列表中的一个形容词，然后将其放在“可排序” ul（列表）中。 当前，它仅在用户拖放列表项时有效。 我知道这是一个漫长的过程，对于这个问题涉及的任何愚蠢表示歉意，但是我认为值得尝试一下。 最后最好重新构建它。 以下是相关代码：

HTML：

<div class="wrap-careerFinder">
    <div class="programfinder">
            <div id="displaycharacter">
                <a id="programLink"><img height="725" width="740" alt="" id="career" style="border: 0px solid currentColor;" src="images/program-images/IT.jpg" /></a>
            </div>

            <ul class="sortablelist" id="list1">
                <li>Analytical</li>
                <li>Assertive</li>
                <li>Compassionate</li>
                <li>Confident</li>
                <li>Creative</li>
                <li>Detail Oriented</li>
                <li>Enjoys Challenges</li>
                <li>Flexible</li>
                <li>Communicator</li>
                <li>Good Listener</li>
                <li>Hard Worker</li>
                <li>Independent</li>
                <li>Likes to Learn</li>
                <li>Logical</li>
                <li>Multi-Tasker</li>
                <li>Observant</li>
                <li>Outgoing</li>
                <li>Passionate</li>
                <li>Patient</li>
                <li>Persistent</li>
                <li>Personable</li>
                <li>Problem Solver</li>
                <li>Professional</li>
                <li>Quick Reactor</li>
                <li>Visual Thinker</li>
                <li>Team Player</li>
                <li>Thick-Skinned</li>
                <li>Time Manager</li>
                <li>Trustworthy</li>
                <li>Self-Motivated</li>
                <li>Stress Manager</li>
                <li>Good Writer</li>
                <li>Resourceful</li>
            </ul>
            <div class="sortablelist-wrapper">
            <h4>How to Use the Career Finder</h4>
                <ul>
               <li><ul class="sortablelist" id="sortable"></ul><li>
               <li>
               <p>To help you find a career program that bests fits you, choose <b>6 characteristics</b> from the list on the left and drag them to the <b>My Characteristics</b> box. Click submit, below.</p>
               </li>
                </ul>
                   <div class="clear"></div>
                <button disabled="disabled" id="submitbtn" onclick="listAttr()" type="button"></button>

            </div>
              <div class="clear"></div>
              <a href="index-home.html">Play Again</a>
        </div>

</div>

JS：

var maxitems = 2;

var courses = [
//key : value, key : value
{"name":"Criminal Justice", "attrs": ["Multi-Tasker", "Assertive", "Team Player", "Confident", "Analytical", "Flexible Personality", "Patient", "Observant", "Trustworthy", "Thick-Skinned", "Stress Manager", "Quick Reactor"], "img" : "images/program-images/criminal-justice.jpg", "url" : "criminal-justice.html"},

{"name":"Accounting", "attrs": ["Detail Oriented", "Team Player", "Analytical", "Problem Solver", "Patient", "Resourceful", "Quick Reactor", "Enjoys Challenges", "Logical ", "Likes to learn", "Persistent"], "img" : "images/program-images/accounting.jpg", "url" : "accounting.html"},

{"name":"Business", "attrs": [ "Team Player", "Analytical", "Communicator", "Creative", "Flexible", "Passionate", "Patient", "Thick-Skinned", "Resourceful", "Persistent", "Stress Manager" ], "img" : "images/program-images/business.jpg", "url" : "business.html"},

{"name":"Health Fitness", "attrs": ["Confident", "Outgoing", "Passionate", "Good Listener", "Patient", "Compassionate", "Independent", "Self-Motivated", "Time Manager", "Resourceful", "Enjoys Challenges"], "img" : "images/program-images/health-fitness.jpg", "url" : "health-fitness.html"},

{"name":"IT", "attrs": ["Detail Oriented", "Team Player", "Analytical", "Problem Solver", "Patient", "Resourceful", "Quick Reactor", "Enjoys Challenges", "Logical", "Likes to Learn", "Persistent"], "img" : "images/program-images/IT.jpg", "url" : "information-tech.html"},

{"name":"Massage Therapy", "attrs": ["Confident", "Communicator", "Personable", "Flexible", "Visual Thinker", "Good Listener", "Compassionate", "Observant", "Independent", "Time Manager", "Self-Motivated", "Likes to Learn"], "img" : "images/program-images/massage-therapy.jpg", "url" : "massage-therapy.html"},

{"name":"Media Business", "attrs": ["Detail Oriented", "Confident", "Problem Solver", "Organized", "Communicator", "Creative", "Visual Thinker", "Passionate", "Good Listener", "Time Manager", "Logical", "Likes to Learn"], "img" : "images/program-images/engineer.jpg", "url" : "engineer.html"},

{"name":"Medical Assistant", "attrs": ["Team Player", "Communicator", "Personable", "Writing Skills", "Flexible", "Good Listener", "Compassionate", "Observant", "Trustworthy", "Stress Manager", "Quick Reactor", "Likes to Learn"], "img" : "images/program-images/medical-assistant.jpg", "url" : "medical-assistant.html"},

{"name":"Parelegal", "attrs": ["Multi-Tasker", "Detail Oriented", "Analytical", "Organized", "Good Writer", "Good Listener", "Hard Working", "Trustworthy", "Time Manager", "Professional", "Resourceful", "Logical"], "img" : "images/program-images/paralegal.jpg", "url" : "paralegal.html"},

{"name":"Vet-Tech", "attrs": ["Multi-Tasker", "Detail Oriented", "Team Player", "Organized", "Outgoing", "Compassionate", "Hard Working", "Observant", "Thick-Skinned", "Self-Motivated", "Quick Reactor", "Likes to Learn"], "img" : "images/program-images/vet-tech.jpg", "url" : "vet-tech.html"},

{"name":"Internet Marketing", "attrs": ["Multi-Tasker", "Likes to Learn", "Creative", "Flexible", "Problem Solver", "Good Writer", "Resourceful", "Observant", "Enjoys Challenges", "Time Manager", "Analytics", "Self-Motivated"], "img" : "images/program-images/architecture.jpg", "url" : "architecture.html"},

{"name":"Architecture", "attrs": ["Detail Oriented", "Confident", "Problem Solver", "Qrganized", "Visual Thinker", "Passionate", "Good Listener", "Time Management", "Logical", "Likes to Learn"], "img" : "images/program-images/media.jpg", "url" : "internet-marketing.html"},

{"name":"Nursing", "attrs": ["Multi-Tasker", "Problem Solver", "Personable", "Good Listener", "Patient", "Compassionate", "Observant", "Thick-Skinned", "Stress Manager", "Quick Reactor", "Logical"], "img" : "images/program-images/nursing.jpg", "url" : "nursing.html"},

{"name":"Health Care Management", "attrs": ["Multi-Tasker", "Detail Oriented", "Assertive", "Confident", "Problem Solver", "Good Communicator", "Writing Skills", "Flexible", "Compassionate", "Logical", "Good Communicator"], "img" : "images/program-images/healthcare-management.jpg", "url" : "healthcare-managment.html"}
//each section is a key 0 to max#... array inside of a array with value


$(function() {
    $( "#list1, #sortable" ).sortable({
        connectWith: ".sortablelist",
        change:dropin

    }).disableSelection();
});
function dropin(event, ui){
    //this is where you total amt to drag into selected area
    if ($("#sortable li").length == maxitems +4){
        $( "#list1, #sortable" ).sortable({ disabled: true });
        $("#submitbtn").removeAttr("disabled");  

    }

}

function listAttr (){
    //bestmatch will equal courses
    var bestmatch;
    //matches equal attrs and li items
    var matches = 0;
    //loop through each course
    $(courses).each(function(key, value){
        var attrs = value.attrs;
        var counter = 0;
        //loop each chosen attr
        $("#sortable li").each(function(){
            var traits = $(this).text();
            //loop through all attr of this course
            $(attrs).each (function (i, val){
            //if it matches will add to the counter 
                if (traits == val){
                    counter ++;
                    }
            });
        }); 
        //compare to the top match and see if its more or less
        if (counter > matches) {
        //if larger then set as best match by this point counter equals total li matches
                bestmatch = value;  
                matches = counter;  
        }

    });
    //id from the images pulling from json name to img pathway
    $("#career").attr("src", bestmatch.img).show();
    $("#programLink").attr("href", bestmatch.url);


}

因此，是否有可能将其轻松更改为包括单击而不只是拖放？

Answer 1

这不是可排序的一部分。 但是，您可以向list1中的所有元素添加点击侦听器，并将其设置为分离项目，然后将其添加到可排序列表中

就像是

$('#list1 li').click(function(event){
    $(event.target).closest('li').detach().appendTo('#sortable');
});