我正在製作一個網頁，用戶必須在測驗中連接兩個列表中的元素。例如，設想一個測驗問題，其中有兩個列表，一個是國家，另一個是大寫，用戶必須將大寫連接到正確的國家。（jQuery插件）在多項選擇測驗中拖放答案
優選地，應該有一種方式讓用戶將元素從第二列表拖到第一列表元素旁邊的區域。就像這樣：
在這裏，你會拖動藍色框拖到灰色矩形。
是否有一個jQuery插件或其他JavaScript庫已經做了這樣的事情？或者我必須自己實施它？如果是這樣，有沒有人有一些指向類似問題的解決方案的文章的指針，或者有關如何最好地解決這個問題的想法？
考慮使用jQuery UI droppable？它幾乎是你想要的東西。只需將灰色框設置爲可拖放，將藍色框設置爲可拖動即可。您可能會使用revert option。
這將&降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>
我希望有一個jQuery插件可以做到這一點，但似乎我必須自己實現這一點。無論如何感謝您的答案！ –
這不應該是一個問題。如果你掙扎了，就讓我們知道。你可以自己創建一個插件！ :) – mreq