soltar imagenes hacer drop dragover arrastrar and javascript jquery html5 drag-and-drop widget

javascript - imagenes - (El complemento jQuery para) arrastrar y soltar las respuestas en el cuestionario de opción múltiple



hacer drag and drop javascript (2)

Estoy haciendo una página web donde el usuario tiene que conectar elementos de dos listas en una prueba. Por ejemplo, imagine una pregunta de prueba en la que tiene dos listas, una con países y otra con mayúsculas, y el usuario debe conectar las mayúsculas a los países correctos.

Preferiblemente, debería haber una manera para que el usuario arrastre los elementos de la segunda lista a un área próxima a los elementos de la primera lista. Me gusta esto:

Aquí, arrastrarías los cuadros azules a los rectángulos grises.

¿Hay un plugin de jQuery u otra biblioteca de JavaScript que hace algo como esto? ¿O debo implementarlo yo mismo? Si es así, ¿alguien tiene algunos consejos para los artículos que describen soluciones a problemas similares, o ideas sobre cómo se puede resolver mejor esto?



Este código de arrastrar y soltar Javascript, funciona en el navegador pero no funciona en la aplicación ibook de ipad, por favor dame la solución, incluso usé 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>&#x002B;</sup></div> <div class="dragableBox" id="box2">Br<sup>&#x2212;</sup></div> <div class="dragableBox" id="box3">CN<sup>&#x2212;</sup></div> <div class="dragableBox" id="box4">NO<sub>2</sub><sup>&#x002B;</sup></div> <div class="dragableBox" id="box5">NO<sub>2</sub><sup>&#x2212;</sup></div> <div class="dragableBox" id="box6">NH<sub>2</sub><sup>&#x2212;</sup></div> <div class="dragableBox" id="box7">RC=C<sup>&#x2212;</sup></div> <div class="dragableBox" id="box8">MeCO<sup>&#x002B;</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>