将拖放从 jquery-ui-sortable 列表更改为单击事件
Change drag and drop from jquery-ui-sortable list to click event
我继承了一个旧的 'career finder' 项目。它的要点是 select 几个形容词，它输出 'career' 最适合用户的。我正在努力使它适合移动设备。它使用 JQuery-Ui-Sortable，我还不太熟悉。现在，我想更改它，以便我只需单击列表中的形容词之一，它就会出现在 "sortable" ul（列表）中。目前，它仅在用户 drags/drops 列出项目时有效。我知道这是一个远景，并为问题中涉及的任何愚蠢行为道歉，但我认为值得一试。最后最好从头开始重建它。相关代码如下：
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);
}
那么是否有任何机会可以轻松地将其更改为包括单击而不是仅仅拖放？
这不是可排序的一部分。但是，您可以向 list1 中的所有元素添加一个点击侦听器，并将其设置为分离项目并将其添加到可排序列表中
类似
$('#list1 li').click(function(event){
$(event.target).closest('li').detach().appendTo('#sortable');
});
我继承了一个旧的 'career finder' 项目。它的要点是 select 几个形容词，它输出 'career' 最适合用户的。我正在努力使它适合移动设备。它使用 JQuery-Ui-Sortable，我还不太熟悉。现在，我想更改它，以便我只需单击列表中的形容词之一，它就会出现在 "sortable" ul（列表）中。目前，它仅在用户 drags/drops 列出项目时有效。我知道这是一个远景，并为问题中涉及的任何愚蠢行为道歉，但我认为值得一试。最后最好从头开始重建它。相关代码如下：
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);
}
那么是否有任何机会可以轻松地将其更改为包括单击而不是仅仅拖放？
这不是可排序的一部分。但是，您可以向 list1 中的所有元素添加一个点击侦听器，并将其设置为分离项目并将其添加到可排序列表中
类似
$('#list1 li').click(function(event){
$(event.target).closest('li').detach().appendTo('#sortable');
});