tags:

views:

24

answers:

1

I wanted to restore the position of red block which is a draggble div on the green and gray block and not in blue block it is not worked on green block but it worked on gray block please help me ... For this purpose i am using jquery revert. The code and lnk are below please help me http://galtech.org/testing/drag.php

<style type="text/css">
    #draggable { width: 100px; height: 70px; background: red; }
    #nodrag { width: 200px; height: 270px; background: #00CC66; }
  </style>

</head>
<body >
<div style="background:#CCCCCC;">
     <div id="droppble_blue" style="background:#99CCCC; height:500px; width:620px;"> 
        <div id="draggable" >Drag</div>
        <div id="nodrag" class="new">no Drag & drop here</div>
    </div>
</div>
</body>
</html>
  <script>
  $(document).ready(function() {
    $("#draggable").draggable({ revert: "invalid" });
    $("#droppble_blue").droppable({drop: function() { alert('dropped');}});
  });
  </script>
A: 

I have not used draggable jquery but would

$("#nodrag").droppable({drop: function() { $('#draggable').css({top:'0px',left:'0px'});}});

work?

Looking further into the draggable stuff there isn't an obvious way to the revert with blocks inside valid elements so I would do the folllowing

$("#draggable").draggable('option', 'start', function(){
   //when drag starts save the positions somewhere
   $(this).data('left',$(this).css('left')).data('top',$(this).css('top'))
});
$("#nodrag").droppable({drop: function(e,ui) {
    //when dropped on an invalid block move it back to where it was (you could change this to animate to mimic revert)
    $(ui.draggable)
   .css({left:$(ui.draggable).data('left'),top:$(ui.draggable).data('top')});
}});
BenWells