headinbeds
5/7/2014 - 9:11 AM

Inserting text with drag n’ drop

Inserting text with drag n’ drop

$(document).ready( function() {
  $('#ClickWordList li').click(function() { 
    $("#txtMessage").insertAtCaret($(this).text());
    return false
  });
  $("#DragWordList li").draggable({helper: 'clone'});
  $(".txtDropTarget").droppable({
    accept: "#DragWordList li",
    drop: function(ev, ui) {
      $(this).insertAtCaret(ui.draggable.text());
    }
  });
});

$.fn.insertAtCaret = function (myValue) {
  return this.each(function(){
  //IE support
  if (document.selection) {
    this.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    this.focus();
  }
  //MOZILLA / NETSCAPE support
  else if (this.selectionStart || this.selectionStart == '0') {
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    var scrollTop = this.scrollTop;
    this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
    this.focus();
    this.selectionStart = startPos + myValue.length;
    this.selectionEnd = startPos + myValue.length;
    this.scrollTop = scrollTop;
  } else {
    this.value += myValue;
    this.focus();
  }
  });
};