从浏览器中拖动选定的内容

【问题标题】：Drag the selected content from browser从浏览器中拖动选定的内容
【发布时间】：2014-12-09 17:09:24
【问题描述】：

我想知道是否有任何方法可以找出这一点，如果我们在浏览器中选择内容（例如单击并拖动时突出显示），则可以知道使用 jquery 在浏览器中选择了什么。

例如，我有一个表格，我选择了（例如单击并拖动时突出显示）该表格的一行，现在我想将其拖到输入中。当我拖动内容时，我是否知道我从浏览器中拖动内容的任何可能性。在这里，我没有使用任何 jquery 拖放表格。是否可以拖放，如果可以，我可以举个例子。

提前致谢。

【问题讨论】：

标签： javascript jquery drag-and-drop

【解决方案1】：

以下是将表格行的内容拖动到文本输入的方法。

包括 jQuery 和 jQueryUI：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

制作表格和输入元素：

<table>
  <tr>
    <td>Dog</td>
  </tr>
  <tr>
    <td>Fish</td>
  </tr>
  <tr>
    <td>Cat</td>
  </tr>
</table>

<p>
  <input type="text" placeholder="Choose an animal" id="dropzone" />
</p>

添加以下JS：

$("tr").draggable({
  appendTo: "body", 
  helper: "clone"
});

$("#dropzone").droppable({
  drop: function(event, ui) {
    $(this).val(ui.draggable.text().trim());
  }
});

在drop函数内部$(this)指的是第一个元素被拖到的元素，所以将其值设置为被拖放元素的文本很简单。

Demo

【讨论】：