Drag and Drop Team Selection

Question

I have a Fantasy F1 Website, currently users select their teams using dropdown menus. It works OK but isn't as user friendly as I would like.

I would like to implement a drag and drop type of system, there's jQuery code out there that would go part of the way to allowing me to do this:

http://jqueryui.com/demos/draggable/

But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

I'd also need to stop them spending more than a certain amount of money, each driver has a value and the teams can only spend a certain amount of money.

There's also limits for example you can only pick a driver once, but you can have three different drivers.

Finally, how would you decide that the user had picked their team, I don't want a submit button as that kind of defeats the object of the exercise!

Thanks for any advice, I don't expect anyone to write the code for me but some pointers would be greatly appreciated.

Answer 1

It sounds as if you should look at using JavaScript for this part of your interface. You can use JavaScript to validate choices as the user makes selections. For example, when the user chooses a driver, call a function that subtracts the driver's cost from available funds, removes that driver from the list of possible drivers, and updates the count of how many drivers have been chosen so far. You can make the menu more user-friendly by only allowing the user to choose from drivers that they can currently afford (unaffordable drivers could be greyed out, for example). For more complex interactivity such as the drag-and-drop menus you are describing, jQuery would certainly be useful.

You can also use jQuery's .ajax() methods to send data to your PHP scripts. This way more of your game logic could remain in PHP, which might be advantageous if you are trying to prevent cheating (JavaScript can easily be tampered with by the user).

Answer 2

But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

In most cases, you'll have to store the driver's IDs (primary key in the database maybe?) on the client side. When the player has filled the list of drivers, you need to take this list of IDs and send it over to your server.

One approach is to store the ID as a data attribute of your container tag:

<div class="driver" data-driver-id="5">
    ...
</div>

Using jQuery you can easily extract these attributes back.

var selectedDriverIds = $('.driver').data('driver-id');

Use the droppable events to listen for changes (the driver has been dropped over), and send that to the server using jQuery's AJAX functionality.

Finally, you'll need to write a PHP function that accepts what data is sent, performs a bit of validation if needed, and returns the appropriate response to jQuery's AJAX call.

The way you implement your status codes, such as "OK", "Not enough drivers", etc is up to you. You can send a JSON string back with a number that the client knows how to interpret and display the appropriate message. Alternatively, you can use HTTP's own codes.

$.ajax({
  type: "POST",
  url: "http://.../drivers.php",
  data: JSON.stringify(selectedDriverIds),
  success: function(result) {
      if (result.message === "OK") {
          // proceed as planned
      } else {
          // handle the errors
      }
  }
});

It's an involved process and does take knowing JS, jQuery, and a bit of PHP<->AJAX knowledge. There are plenty of resources that will walk you through how to do this.