0

I am pretty new to JQuery and have worked through a series of tutorials on the web and answers on this website but I can't work this out and would appreciated any help.

I am trying to create a function where there are a series of draggable and droppable divs. Each are only accepted into the relevant slots.

Once in the slots a little 'x' appears which the user can click to send the draggable element back to its parent.

I'm almost there this code almost works - I have the slots, I have the draggable element. The 'x' appears when it stops but I can get the 'x' to work to make the div return home.

Any help appreciated. Here is my code:

<!doctype html>
<html lang="en">
<head>
Drag and drop</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
$( init );

function init() {
// Reset 
$('#defPile').html( '' );
$('#defSlots').html( '' );
$('#gkPile').html( '' );
$('#gkSlots').html( '' );

// Create defenders
  var numbers = [ 1, 2, 3, 4 ];
  var position = 'd';  
  for ( var i=0; i<4; i++ ) {
    $('<div>' + numbers[i] + "<span class='undo' style='display:none'>x</span> </div>").data( 'number', numbers[i] ).data( 'position', 'd' ).attr( 'id', 'card'+numbers[i]  ).appendTo( '#defPile' ).draggable( {
      containment: '#content',
      stack: '#defPile div',
      revert: 'invalid',
      stop: function(event, ui){
        $(this).find('.undo').show();   
        $(this).draggable('option','revert','invalid');
      }
    } );
  } 

    // Create the pile gk cards
  var numbers = [ 1, 2, 3, 4, 5 ];
  var position = 'g';

  for ( var i=0; i<5; i++ ) {
    $('<div>' + numbers[i] + "<span class='undo' style='display:none'>x</span></div>").data( 'number', numbers[i] ).data( 'position', 'g' ).attr( 'id', 'card'+numbers[i] ).appendTo( '#gkPile' ).draggable( {
      containment: '#content',
      stack: '#gkPile div',
      revert: 'invalid',
      stop: function(event, ui){
        $(this).find('.undo').show();   
        $(this).draggable('option','revert','invalid');
      }
    } );
  }

     // Create the def slots
  var words = [ 'def' ];
    $('<div>' + 'defender' + '</div>').data( 'number', i ).appendTo( '#defSlots' ).droppable( {
      accept: '#defPile div',
      hoverClass: 'hovered',
  drop: handleCardDrop      
    } );

     // Create the gk slots
  var words = [ 'gk' ];
    $('<div>' + 'goalie' + '</div>').data( 'number', i ).appendTo( '#gkSlots' ).droppable( {
      accept: '#gkPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop      
    } );

 }


function handleCardDrop(event,ui ) {
        ui.draggable.draggable('option','revert',false);
    if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
                          ui.draggable.data("draggable").originalPosition);
                          $(this).droppable( 'disable' );
    }


  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );
  var position = ui.draggable.data( 'position' );


    //ui.draggable.addClass( 'correct' );
     ui.draggable.draggable( 'disable' );
    //$(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );

    //$(this).draggable('option','revert','invalid');
}

$('.gkPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('.defPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
        position = $this.data("originalPosition");

        if (position) {
            $this.animate({
            left: position.left,
            top: position.top
        }, 500, function() {
            $this.data("originalPosition", null);
        });
    }
    });
        $selector.find('.undo').hide();

}

</script>

 </head>
<body>

<div id="content">

  <div id="defPile"> </div>
  <div id="defSlots"> </div>

<div id="gkPile"> </div>
  <div id="gkSlots"> </div>

 </div>

</div>


 </body>
 </html>

There is a working example at: http://www.lfc-predictions.co.uk/dragtest/index3.php

1 Answer 1

1

Took a look at the page and it looks like you are very close! Just need to change the selectors for the click events from class selectors to id selectors

$('#gkPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('#defPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

For jQuery selectors use # for ids and . for classes.

4
  • Thanks for your reply. I made your change, still didnt work. But then I popped it into jsfiddle and it worked! So I bumped up my JQuery version and we've got there.Thanks so much for your speedy and accurate reply!
    – Mrchuckles
    Jun 21, 2013 at 20:30
  • One final question. I can reverse the code to make the element draggable on the return. But using your code above. How would I make the slot droppable again? Thanks for your help.
    – Mrchuckles
    Jun 21, 2013 at 20:48
  • Your welcome =) Looks like you disable droppable. Just add $div.closest('.ui-droppable').droppable('enable'); when you set originalPosition to null and you should be ok. If that doesn't work try $('.ui-droppable').droppable('enable'); And if that works you just have to find a way to enable the right drop zone.
    – JasonM
    Jun 21, 2013 at 22:39
  • Cheers. Putting $('.ui-droppable').droppable('enable'); in the click function works! thanks for your help
    – Mrchuckles
    Jun 23, 2013 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.