Hi,

I am working on developing my own board application. Its a "simple" board game application in which I want the player to be able to drag and drop pieces but they should only be able to drop in certain places.

The information where the pieces can move is stored on a remote server. When a piece is "picked up" a message is sent to the server containing information on which piece and the server responds back with the locations. When the client receives the locations, it then generates the droppable locations. The issue is that it won't drop the first time.

Here is a snippet of my code:

    $(".piece").draggable({
        revert: 'invalid',
    start: function (event, ui){
        $.post("backend.php",{
            position: $(this).attr("id"),
            piece: $(this).attr("alt"),
            action: "pmove"
            }, function(xml) {
        showMoves(xml);
        })
      });

      function showMoves (xml)
      {
          if($("status", xml).text() == "2") return;

          $("message", xml).each(function(id) {
            message = $("message", xml).get(id);

            $('<div class="dropZone" style="position:absolute; top:'
              + $("y_coordinate", message).text()
              + 'px; left:'
              + $("x_coordinate", message).text()
              + 'px;"></div>').appendTo('#board');

            });

            initBinding();

    }

      function initBinding()
      {
             $('.dropZone').droppable( {
            accept: ".piece",
            drop: function(event, ui) {
              $(".dropZone").remove();
              }
            });
      }









































My guess is it is failing because the droppable aren't listed as accepting this piece until after the drag has started. Is there anyway around this? Or do I just need to redesign my architecture (last choice).

Thanks.