dragging a dropped element back to its original container

Question

so this is what I have till now (I am working with third party example)...

 var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];


  for ( var i=0; i<4; i++ ) {

    $('#card'+numbers[i]).data( 'number', numbers[i] ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      snap: '#cardSlots',
    snapMode: 'inner',
    snapTolerance: 10,
       revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
                 // don't revert, it's in the droppable
                 return false;
             } else {
                 if (hasBeenDroppedBefore) {
                     // don't rely on the built in revert, do it yourself
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
                     // just let the built in revert work, although really, you could animate to 0,0 here as well
                     return true;
                 }
             }
        }
    } );
  }

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=4; i++ ) {
    $('#answer'+words[i-1]).data( 'number', i ).droppable( {
      accept: '#cardPile div',
      activeClass: 'ui-state-hover',
      hoverClass: 'hovered',
      out: function( event, ui ) {
        if (!$(this).attr('id')){
                alert("sdsds") // what i tried here was if there was no droppable container send an alert this doesnt work 
        }


      },
      drop: handleCardDrop
    } );
  }
function handleCardDrop( event, ui ) {
  var dropdata=   ui.draggable.data('hasBeenDropped',true);
  var slotNumber = $(this).data( 'number' );
  alert($(this).attr('id'))
  var cardNumber = ui.draggable.data( 'number' );
  alert("slot--"+slotNumber);
  alert("cal--"+cardNumber);
alert(dropdata);
  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again


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

}

so here's the issue

If I drag the card from the original container and drop it outside the card slots it reverts - no problem
If I drag the card from the original container and drop it inside the card slots it holds - no problem
once I have dropped the card into a slot i want to be able to drag it to multiple lots - this works
Where this fails if i drag a dropped card outside any where on the screen it sticks to where i dropped it on the screen - what i would like to happen is if I drag and drop a card from a slot (a hasbeendropped card) it should send an alert (ideally what i will do is destroy the card and make it reappear on the original container). Can this be done ???

I have tried quite a few examples from stack but could not detect when a card is not being dropped over a card slot...

any help is appreciated. created a jsfiddle https://jsfiddle.net/puuaa5r9/5/

Thanks

Can you create a minimal reproducible example so that we can try it out and help you? — Praveen Kumar Purushothaman
I have been able to solve this problem...... should i post the solution ? — Apurva

Apurva Apurva · Accepted Answer · 2018-03-21T14:41:09

  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  //numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<4; i++ ) {
   // alert(i)
    $('#card'+numbers[i]).data( 'number', numbers[i] ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      snap: '#cardSlots',
    snapMode: 'inner',
    snapTolerance: 10,
    create: function(){$(this).data('position',$(this).position())},
    start:function(){$(this).stop(true,true)},
       revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
                 // don't revert, it's in the droppable
                 return false;
             } else {
                 if (hasBeenDroppedBefore) {
                     // don't rely on the built in revert, do it yourself
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
                     // just let the built in revert work, although really, you could animate to 0,0 here as well
                     return true;
                 }
             }
        }
    } );
  }

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=4; i++ ) {
    $('#answer'+words[i-1]).data( 'number', i ).data('droppeditem',"nodrop").droppable( {
      accept: '#cardPile div',
      activeClass: 'ui-state-hover',
      hoverClass: 'hovered',
       over: function(event, ui) {
            $(ui.helper).unbind("mouseup");
        },

      out:function(event, ui){
            $(ui.helper).mouseup(function() {
                snapToStart(ui.draggable,$(this)); 
            });
        },
      drop: handleCardDrop
    } );
  }

}
function snapToMiddle(dragger, target){
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
function snapToStart(dragger, target){
    dragger.animate({top:0,left:0},{duration:600,easing:'easeOutBack'});
}
function handleCardDrop( event, ui ) {
    alert($(ui.droppable).serialize())
 // var dropdata=  
  var slotNumber = $(this).data( 'number' );
  var droppeditem = $(this).data( 'droppeditem' );
  alert($(this).attr('id'))
  var cardNumber = ui.draggable.data( 'number' );
  alert("slot--"+slotNumber);
  alert("cal--"+cardNumber);
  alert("droppeditem--"+droppeditem);


//snapToMiddle(ui.draggable,$(this));


 // if ( droppeditem == "nodrop" ) {
    ui.draggable.addClass( 'correct' );
   ui.draggable.draggable( 'enable' );
   $(this).droppable( 'enable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );

  /*  ui.draggable.addClass( 'correct' );
   ui.draggable.draggable( 'enable' );
   $(this).droppable( 'enable' );
  ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

   ui.draggable.draggable( 'option', 'revert', true );
    alert("hello2");
  }*/

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go



}

dragging a dropped element back to its original container

1 Answers