login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Droppable opslaan, maar hoe naam verkrijgen?

Offline GroundZero - 10/05/2012 11:15
Avatar van GroundZeroLid Beste,

ik heb een inventory en een aantal sloten (hand, lichaam, hoofd, en zo voort). Ik wil nu dat ik een item uit de inventory in een van de sloten kan slepen. Dit werkt prima, echter heb ik nu geen idee hoe ik het kan opslaan... hoe kan ik in de javascript nu een aantal variabele mee geven waarin opgeslagen staat welke item (plaatje) gekozen is?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel="stylesheet" type="text/css" href="css/style.css" />
  2.  
  3. <script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  4. <script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
  5.  
  6. <script language="javascript" type="text/javascript">
  7. $(function() {
  8. 	// make everything dragable
  9. 	$( ".drag-head" ).draggable({ revert: "invalid" });
  10. 	$( ".drag-body" ).draggable({ revert: "invalid" });
  11. 	$( ".drag-main-hand" ).draggable({ revert: "invalid" });
  12.  
  13. 	// set a function for each acceptible item slot
  14. 	$( "#head-item" ).droppable({
  15. 		drop: function( event, ui ) {
  16. 			alert(ui.helper);
  17. 			//submit the form
  18. 			sendRequest();
  19. 		},
  20. 		accept: ".drag-head"
  21. 	});
  22.  
  23. 	$( "#body-item" ).droppable({
  24. 		drop: function( event, ui ) {
  25. 			sendRequest();
  26. 		},
  27. 		accept: ".drag-body"
  28. 	});
  29.  
  30. 	$( "#main-hand-item" ).droppable({
  31. 		drop: function( event, ui ) {
  32. 			sendRequest();
  33. 		},
  34. 		accept: ".drag-main-hand"
  35. 	});
  36. });
  37.  
  38. function sendRequest(){
  39. 	$.ajax({
  40. 		// ajax request
  41. 		url: 'ajax/inventory.php',
  42. 		type: 'POST',
  43. 		data: {
  44.  
  45. 		},
  46. 		success: function(html){
  47. 			$('.wrapper').html(html);	
  48. 		}
  49. 	});
  50. }
  51. </script>
  52.  
  53. <div class="equipment">
  54.     <div class="main-hand" id="main-hand-item">
  55.  
  56.     </div>
  57.     <div class="hands">
  58.  
  59.     </div>
  60.     <div class="head" id="head-item">
  61.  
  62.     </div>
  63.     <div class="body" id="body-item">
  64.  
  65.     </div>
  66.     <div class="second-hand">
  67.  
  68.     </div>
  69.     <div class="feet">
  70.  
  71.     </div>
  72.     <div class="belt">
  73.  
  74.     </div>
  75. </div>
  76. <div class="statistics">
  77.     <ul>
  78.         <li><span class="prefix">HP</span> 100/100</li>
  79.         <li><span class="prefix">MP</span> 80/80</li>
  80.         <li><span class="prefix">EXP</span> 0/1000</li>
  81.     </ul>
  82. </div>
  83. <div class="inventory">
  84.     <img src="uploads/crystalsword.gif" alt="elite-crystal-sword" class="drag-main-hand" name="crystalsword" />
  85.     <img src="uploads/chainmail.gif" alt="elite-chainmail" class="drag-body" name="chainmail" />
  86.     <img src="uploads/bonehelm.gif" alt="elite-bonehelm" class="drag-head" name="bonehelm" />
  87. </div>


Je ziet onderaan 3 items staan (plaatjes). Allemaal hebben ze een unique name tag. Aan de hand van de name tag wil ik graag de naam in mijn ajax request hebben zodat ik deze met PHP kan opslaan in de database zeg maar.

2 antwoorden

Gesponsorde links
Offline Martijn - 10/05/2012 12:11 (laatste wijziging 10/05/2012 12:13)
Avatar van Martijn Crew PHP Allereerst wil je geen unieke naam, maar unike id (beetje dubbel, id moet altijd uniek zijn ). In javascript is er een functie getElementById, die sneller gaat dan een selecter op name

Dan, jQuery past DOM aan, simpel gezien betekent dat, op het moment dat je drag klaar is, kun je zo doen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var id = $('#beld').find('img').id; // .attr('id') kan ook, maar .id is native (.prop() voor jq 1.6.1+)


edit, je zou ook nog even bij de 'stop' kunnen kijken wat je meekrijgt:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. stop: function(event, ui) { console.log(event); console.log(ui); } // zie jquery zelf voor plaatsing


Voorwaarde is dat je firebug in firefox aan hebt staat. If not -> doen 
Offline GroundZero - 10/05/2012 16:04
Avatar van GroundZero Lid duidelijk, we gaan het eens proberen. Dankjewel Martijn!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.233s