title: jquery change element while dragging
body: <p>i need to change the drag element while been dragging. in this case, i need to change the word "HELLO" to "HI" but if the user does not perform a drop, the element should be back to the original state, "HELLO". <a href="http://i.stack.imgur.com/QNBLD.png" rel="nofollow">http://i.stack.imgur.com/QNBLD.png</a></p>
  
  
  
  <p>I really need this. can any one help me please.
  Thanks in advance,</p>
  
  <p>CAFC</p>
  
  <p>my code: <a href="http://jsfiddle.net/cafc/wwqxw7Ld/" rel="nofollow">DEMO JSFIDDLE</a> </p>
  
  <pre><code>$(document).ready(function()
  {
  
  var td1 = $("#A");
  var td2 = $("#B");
  
  td1.draggable({
      cursor: "move",
      appendTo: "body",
      helper: "clone",
      opacity: "0.5",
      revert: "invalid"
  
  });
  
  td2.droppable({
      accept: 'div',  
      drop: function (event, ui) {
  
          var x = $(ui.draggable).html();
  
          $(this).html(x);
  
      }
  });
  
  
  });
  </code></pre>