Javascript （jQuery插件到）拖动&；多项选择题测验中的放弃答案
我正在制作一个网页，用户必须在其中连接测验中两个列表中的元素。例如，想象一个测验问题，你有两个列表，一个是国家，另一个是大写，用户必须将大写字母连接到正确的国家 优选地，用户应该有一种方法将元素从第二列表拖动到第一列表元素旁边的区域。像这样： 在这里，您可以将蓝色框拖动到灰色矩形中 有没有jQuery插件或其他JavaScript库已经做了类似的事情？还是我必须自己实施？如果是这样的话，有没有人对描述类似问题解决方案的文章有什么建议，或者对如何最好地解决这个问题有什么想法？考虑使用？它能做你想做的事情。只需将灰色框设置为可拖放，蓝色框设置为可拖放Javascript （jQuery插件到）拖动&；多项选择题测验中的放弃答案,javascript,jquery,html,drag-and-drop,widget,Javascript,Jquery,Html,Drag And Drop,Widget,我正在制作一个网页，用户必须在其中连接测验中两个列表中的元素。例如，想象一个测验问题，你有两个列表，一个是国家，另一个是大写，用户必须将大写字母连接到正确的国家 优选地，用户应该有一种方法将元素从第二列表拖动到第一列表元素旁边的区域。像这样： 在这里，您可以将蓝色框拖动到灰色矩形中 有没有jQuery插件或其他JavaScript库已经做了类似的事情？还是我必须自己实施？如果是这样的话，有没有人对描述类似问题解决方案的文章有什么建议，或者对如何最好地解决这个问题有什么想法？考虑使用？它能做你想
您可能会使用。此拖放Javascript代码，它在浏览器上可用，但在ipad的ibook应用程序中不可用，请给我解决方案，即使我使用了jquery.ui.touch-punch.min.js
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/OEBPS" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
<head>
<title>Demo 2: Drag and drop</title>
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}
#capitals{
width:200px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#countries{
width:300px;
float:right;
margin: 4px 61px 3px -8px;
height:400px;
}
#labels{
width: 120px;
float:right;
margin: -403px 116px 3px -8px;
height:400px;
/*border: 1px solid red;*/
}
.dragableBox,.dragableBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dragableBox,.labelBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
div.dragableBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#D3D3D3;
border: 1px dashed;
}
div.labelBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#E2EBED;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="capitals">
<div id="dropContent">
<div class="dragableBox" id="box1">Br<sup>+</sup></div>
<div class="dragableBox" id="box2">Br<sup>−</sup></div>
<div class="dragableBox" id="box3">CN<sup>−</sup></div>
<div class="dragableBox" id="box4">NO<sub>2</sub><sup>+</sup></div>
<div class="dragableBox" id="box5">NO<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box6">NH<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box7">RC=C<sup>−</sup></div>
<div class="dragableBox" id="box8">MeCO<sup>+</sup></div>
</div>
</div>
<div id="countries">
<div id="box106" class="dragableBoxRight"></div>
<div id="box107" class="dragableBoxRight"></div>
<div id="box101" class="dragableBoxRight"></div>
<div id="box104" class="dragableBoxRight"></div>
<div id="box105" class="dragableBoxRight"></div>
<div id="box102" class="dragableBoxRight"></div>
<div id="box103" class="dragableBoxRight"></div>
<div id="box108" class="dragableBoxRight"></div>
</div>
<div id="labels">
<div id="boxl106" class="labelBoxRight">nucleophiles</div>
<div id="boxl107" class="labelBoxRight">Electrophiles</div>
<div id="boxl101" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">Electrophiles</div>
<div id="boxl105" class="labelBoxRight">nucleophiles</div>
<div id="boxl102" class="labelBoxRight">Electrophiles</div>
<div id="boxl103" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">nucleophiles</div>
</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>
<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/hammer.min.js"></script>
<!-- <link href="css/jquery-ui.css" rel="stylesheet"
type="text/css" />-->
<script type="text/javascript">
<![CDATA[
// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('div'); // Number of subdivs
if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='capitals'){
// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
targetObj = targetObj.getElementsByTagName('div')[0];
}
targetObj.appendChild(sourceObj); // Append
}
function r1()
{
}
var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object
// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true);
// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init(); // Initizlizing drag and drop object
]]>
</script>
</body>
</html>
演示2：拖放
/*演示的CSS。脚本所需的CSS由脚本动态加载*/
#主容器{
宽度：600px；
保证金：0自动；
边缘顶部：10px；
边框：1px实心#000；
填充：2px；
}
#首都{
宽度：200px；
浮动：左；
边框：1px实心#000；
背景色：#E2EBED；
填充：3倍；
高度：400px；
}
#国家{
宽度：300px；
浮动：对；
保证金：4PX61PX3PX-8px；
高度：400px；
}
#标签{
宽度：120px；
浮动：对；
利润率：-403px 116px 3px-8px；
高度：400px；
/*边框：1px纯红*/
}
.dragableBox、.dragableBoxRight{
宽度：80px；
高度：10px；
边框：1px实心#000；
背景色：#FFF；
边缘底部：5px；
填充：10px；
字体大小：粗体；
文本对齐：居中；
}
.dragableBox、.labelBoxRight{
宽度：80px；
高度：10px；
边框：1px实心#000；
背景色：#FFF；
边缘底部：5px；
填充：10px；
字体大小：粗体；
文本对齐：居中；
}
dragableBoxRight分区{
高度：31px；
宽度：110px；
/*浮动：左*/
右边距：5px；
填充物：5px；
背景色：#D3；
边框：1px虚线；
}
labelBoxRight分区{
高度：31px；
宽度：110px；
/*浮动：左*/
右边距：5px；
填充物：5px；
背景色：#E2EBED；
}
.升降箱{
宽度：190px；
边框：1px实心#000；
背景色：#E2EBED；
高度：400px；
边缘底部：10px；
填充：3倍；
溢出：自动；
}
a{
颜色：#F00；
}
.清楚{
明确：两者皆有；
}
img{
边界：0px；
}
Br+；
Br−；
中国−；
NO2和x002B；
第二−；
NH2和x2212；
RC=C−；
MeCO+；
亲核菌
亲电试剂
亲核菌
亲电试剂
亲核菌
亲电试剂
亲核菌
亲核菌
0&&targetId！='（大写）返回；//目标上存在子div，即元素已在其上拖动。=>从函数返回而不做任何操作
var sourceObj=document.getElementById（idOfDraggedItem）；//创建对源的引用，即拖动的对象
var numericIdTarget=targetId.replace（/[^0-9]/gi'，）/1；//查找目标的数字id
var numericsource=idOfDraggedItem.replace（/[^0-9]/gi'，）/1；//查找源的数字id
如果（numericIdTarget numericIdSource==100）{//在上面的html中，国家id和首都id之间的差值为100（例如：
//奥斯陆的id为“box1”，挪威的id为“box101”，即1+100。
sourceObj.style.backgroundColor='#0F0'；//为拖动的对象设置绿色背景色
}否则{
sourceObj.style.backgroundColor=''；//重置回默认的白色背景色
}
如果（targetId=='capitals'）{
//目标是大写框-将拖动的项作为第一个子div的子项追加，即作为
targetObj=targetObj.getElementsByTagName（'div'）[0]；
}
targetObj.appendChild（sourceObj）；//Append
}
函数r1（）
{
}
var dragDropObj=new DHTMLgoodies_dragDrop（）；//创建拖放对象
//将拖动事件指定给大写字母
dragDropObj.addSource（'box1'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box2'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box3'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box4'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box5'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box6'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box7'，true）；//使其可拖动。放置后将项目滑回原始位置
dragDropObj.addSource（'box8'，true）；
//在国家/地区分配投放活动
dragDropObj.addTarget（'框10
<h3>Treatment Areas</h3>
<div class="container">
<div data-value="1" class="draggable">
<p>Back</p>
</div>
<div data-value="1" class="droppable">
<div class="droparea"></div>
<p>Area 1</p>
</div>
</div>
<div class="container">
<div data-value="2" class="draggable">
<p>Adomen</p>
</div>
<div data-value="2" class="droppable">
<div class="droparea"></div>
<p>Area 2</p>
</div>
</div>
<div class="container">
<div data-value="3" class="draggable">
<p>Chest</p>
</div>
<div data-value="3" class="droppable">
<div class="droparea"></div>
<p>Area 3</p>
</div>
</div>
$('.draggable').draggable({
//cursor: 'move'
});
$('.droppable').droppable({
drop: function(event, ui) {
$(this).addClass('ui-state-highlight');
ui.draggable.position({
of: $(this),
my: 'left top',
at: 'left+6 top+6'
});
$('.draggable').each(function(i) {
$(this).data('value', i+1);
}).filter(':first').trigger('listData');
}
});
$('.draggable').on('listData', function() {
$('.droppable').each(function() {
console.log( $(this).text() + ' - ' + $(this).data('value') );
});
});
body {
padding: 1em;
}
.draggable {
width: 100px;
padding: 5px;
float: left;
margin: 10px 10px 10px 0;
background: red;
color: #fff;
cursor: move;
p {
margin: 2px 0;
}
}
.droppable {
width: 300px;
padding: 5px 10px 5px 5px;
float: right;
margin: 10px;
border: 1px solid #ddd;
p {
float: right;
width: 50px;
height: 30px;
padding: 5px 5px 0 0;
text-align: center;
margin: 0;
}
}
.container {
clear: both;
margin: 10px;
width: 100%;
}
.droparea {
float: left;
border: 1px dashed red;
width: 108px;
height: 30px;
}