jquery-ui-sortableリストからクリックイベントにドラッグアンドドロップを変更する

Question

私は古い「キャリアファインダー」プロジェクトを継承しました。それの要点は、いくつかの形容詞を選択することであり、それはユーザーにとって「キャリア」が最善であろうものを出力する。私はこれをモバイルフレンドリーにしようとしています。それはJQuery-Ui-Sortableを使用しています。今のところ、リスト内の形容詞の1つをクリックするだけで、ソート可能な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 li').click(function(event){ 
    $(event.target).closest('li').detach().appendTo('#sortable'); 
});