如何在鼠标发行版的文本框中拖动文本和删除

Question

我有一个文本，我有一个文本框，里面装有一些文本，我想将其他文本拖到文本框中

我试图拖放，但我将文本放在光标位置，而不是我释放鼠标按钮的位置

这是我尝试的：

jQuery代码

 $(document).ready(function () {
            $("#DragWordList li").draggable({ helper: 'clone' });
            $(".txtDropTarget").droppable({
                accept: "#DragWordList li",
                drop: function (ev, ui) {
                    $(this).insertAtCaret(ev,"[" + ui.draggable.text() + "]");
                }
            });
        });

$( "#txtMessage2" ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});
        $.fn.insertAtCaret = function (ev,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.myTextBox.SelectionStart = 3;
                    this.focus();
                    this.selectionStart = startPos + myValue.length;
                    this.selectionEnd = startPos + myValue.length;
                    this.scrollTop = scrollTop;
                } else {
                    this.value += myValue;
                    this.focus();
                }
            });
        };

html代码

  <table border="0">
        <tr>
            <td valign="top">
                <b>
                    Text Message Content</b><br />
                <textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget ui-droppable"
                    cols="40" rows="10">
this is some text ... </textarea>
            </td>
            <td>&nbsp;</td>
            <td valign="top">            
                <fieldset id="leftcolumn" style="margin-top:10px;">
                    <legend>Drag to insert:</legend>
                    <ul id="DragWordList">
                        <li>Contact Name</li>
                        <li>Arranger Name</li>
                        <li>Location Name</li>
                    </ul>
                </fieldset>
            </td>
        </tr>
    </table>

预期的输出应为文本掉落到拖动后释放鼠标按钮的位置

Answer 1

用空格填充文本框，您都已设置。您不需要jQuery。

链接到演示

$(document).ready(function() {
  $("#DragWordList li").draggable({
    helper: 'clone'
  });
  $(".txtDropTarget").droppable({
    accept: "#DragWordList li",
    drop: function(ev, ui) {
      $(this).insertAtCaret(ev, "[" + ui.draggable.text() + "]");
    }
  });
});
$("#txtMessage2").mousemove(function(event) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
  $("span:last").text("( event.clientX, event.clientY ) : " + clientCoords);
});
$.fn.insertAtCaret = function(ev, 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.myTextBox.SelectionStart = 3;
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
};

<table border="0">
  <tr>
    <td valign="top">
      <b>
                    Text Message Content</b><br />
      <textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget ui-droppable" style="overflow: hidden;resize: none;" cols="40" rows="10">I have a text here            ANd I have a text here     It doesn't matter if you have a text here it still works fine. Try this!                                                                                                                                                                               
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                
                                                                                                                                                                                                 </textarea>
    </td>
    <td>&nbsp;</td>
    <td valign="top">
      <fieldset id="leftcolumn" style="margin-top:10px;">
        <legend>Drag to insert:</legend>
        <ul id="DragWordList">
          <li>Contact Name</li>
          <li>Arranger Name</li>
          <li>Location Name</li>
        </ul>
      </fieldset>
    </td>
  </tr>
</table>